一、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>

日常学习记录~