vuejs: 解决浏览器切换页面后setInterval计时器停止执行的问题

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      intervalId: null
    };
  },
  created() {
    // 页面加载时开始计时器
    this.startTimer();
    // 绑定页面可见性变化事件
    document.addEventListener('visibilitychange', this.handleVisibilityChange);
  },
  beforeDestroy() {
    // 组件销毁前清除计时器
    this.clearTimer();
    // 移除页面可见性变化事件监听
    document.removeEventListener('visibilitychange', this.handleVisibilityChange);
  },
  methods: {
    startTimer() {
      this.intervalId = setInterval(() => {
        // 定义计时器要执行的操作
        console.log('计时器正在运行...');
      }, 1000);
    },
    clearTimer() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    },
    handleVisibilityChange() {
      if (document.visibilityState === 'visible') {
        // 页面变为可见时重新开始计时器
        this.startTimer();
      } else {
        // 页面变为不可见时暂停计时器
        this.clearTimer();
      }
    }
  }
};
</script>

这段代码在Vue组件的生命周期中正确处理了计时器的开启和关闭。它在组件创建时开启计时器，并监听页面的可见性变化。当页面不可见时（用户切换到另一个标签页或最小化浏览器），计时器会被清除；当页面再次变为可见时，计时器会被重新启动。这样做确保了计时器在用户与应用程序交互时正常运行，而不会在后台消耗不必要的资源。