一、vue2定时器

在Vue 2中，你可以使用mounted生命周期钩子来启动一个定时器，并在beforeDestroy钩子中清除它，以确保不会发生内存泄漏。以下是一个简单的例子：

export default {
  data() {
    return {
      timerId: null
    };
  },
  mounted() {
    // 启动定时器
    this.timerId = setInterval(this.yourMethod, 1000); // 每1000毫秒调用一次yourMethod方法
  },
  methods: {
    yourMethod() {
      // 你的方法逻辑
      console.log('定时器触发的方法');
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timerId) {
      clearInterval(this.timerId);
    }
  }
};

二、vue3定时器

在Vue 3中，你可以使用setup函数来设置定时器和清除它。Vue 3的Composition API提供了更灵活的方式来组织和管理组件逻辑。以下是一个在Vue 3中定时处理某个方法的例子：

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const timerId = ref(null);

    const yourMethod = () => {
      // 你的方法逻辑
      console.log('定时器触发的方法');
    };

    onMounted(() => {
      // 启动定时器
      timerId.value = setInterval(yourMethod, 1000); // 每1000毫秒调用一次yourMethod方法
    });

    onUnmounted(() => {
      // 清除定时器
      if (timerId.value) {
        clearInterval(timerId.value);
        timerId.value = null;
      }
    });

    return {
      // 这里可以返回其他响应式数据或方法
    };
  }
};

yourMethod是一个箭头函数，它包含了你想要定时执行的逻辑。timerId是一个响应式引用，用于存储定时器的ID。onMounted和onUnmounted是Vue 3提供的生命周期钩子，分别在组件挂载和卸载时调用。

在onMounted钩子中，我们启动定时器并将ID存储在timerId中。在onUnmounted钩子中，我们检查timerId是否存在，如果存在则清除定时器，并将它的值设置为null以避免引用未定义的定时器。

这种使用setup函数的方式提供了更多的灵活性，因为你可以根据需要组合多个响应式变量和函数，而不是像Vue 2中那样依赖组件的data、methods和beforeDestroy等选项。

三、多方法定时（适用vue2和vue3）

<script>
export default {
  created() {
    // 在组件创建时启动定时器
    this.timer = setInterval(() => {
      this.getLeftTopData();
      this.getLeftCenterData();
      this.getRightTopData();
      this.getRightCenterData();
      this.getLeftBottomData();
    }, 60000);
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器，防止内存泄漏
    clearInterval(this.timer);
  },
  methods: {
    getLeftTopData() {
      // 获取左上角数据的方法
    },
    getLeftCenterData() {
      // 获取左中部数据的方法
    },
    getRightTopData() {
      // 获取右上角数据的方法
    },
    getRightCenterData() {
      // 获取右中部数据的方法
    },
    getLeftBottomData() {
      // 获取左下角数据的方法
    }
  }
};
</script>

日常学习记录~