Vue3定时器详解

一、Vue3定时器销毁

在使用Vue3定时器时，为了避免产生内存泄漏，建议在组件销毁前将定时器清除。可以使用beforeUnmount()生命周期函数。

  
    import { onBeforeUnmount } from 'vue';
    
    export default {
      setup() {
        let timerId = null;
        
        // 定时器调用函数
        function doSomething() {
          // ...
        }
        
        // 组件卸载前清除定时器
        onBeforeUnmount(() => {
          clearInterval(timerId);
        });
        
        return {
          // ...
        }
      }
    }
  

二、Vue3离开页面销毁定时器

如果在Vue3应用中存在多个页面，为了避免页面跳转时未清除定时器而产生问题，可以使用window.beforeunload事件进行定时器清除。

  
    import { onMounted, onUnmounted } from 'vue';
    
    export default {
      setup() {
        let timerId = null;
        
        // 定时器调用函数
        function doSomething() {
          // ...
        }
        
        // 组件挂载时
        onMounted(() => {
          timerId = setInterval(doSomething, 1000);
          
          // 监听页面离开事件
          window.addEventListener('beforeunload', clearTimer);
        });
        
        // 组件卸载时
        onUnmounted(() => {
          clearTimer();
        });
        
        // 清除定时器
        function clearTimer() {
          clearInterval(timerId);
          window.removeEventListener('beforeunload', clearTimer);
        }
        
        return {
          // ...
        }
      }
    }
  

三、Vue3定时器中的作用域

在Vue3中，setup()函数中的变量和函数仅在该组件内部可见。如果要在定时器中使用其他的setup()函数中的变量或函数，需要使用ref或reactive。

  
    import { ref, onMounted } from 'vue';
    
    export default {
      setup() {
        const count = ref(0);
        
        // 定时器调用函数
        function increaseCount() {
          count.value++;
        }
        
        // 组件挂载时
        onMounted(() => {
          setInterval(increaseCount, 1000);
        });
        
        return {
          count
        }
      }
    }
  

四、Vue3清除定时器

Vue3中清除定时器可以使用clearInterval()或clearTimeout()函数，使用方式与原生JavaScript相同。

  
    import { ref, onMounted } from 'vue';
    
    export default {
      setup() {
        let timerId = null;
        const count = ref(0);
        
        // 定时器调用函数
        function increaseCount() {
          count.value++;
        }
        
        // 组件挂载时
        onMounted(() => {
          timerId = setInterval(increaseCount, 1000);
        });
        
        // 清除定时器
        function clearTimer() {
          clearInterval(timerId);
        }
        
        return {
          count,
          clearTimer
        }
      }
    }
  

五、Vue3定时器Hook

Vue3提供了useInterval Hook来方便地使用定时器。

  
    import { useInterval } from '@vueuse/core';
    
    export default {
      setup() {
        const count = ref(0);
        
        // 定时器调用函数
        function increaseCount() {
          count.value++;
        }
        
        // 使用useInterval Hook
        useInterval(increaseCount, 1000);
        
        return {
          count
        }
      }
    }
  

六、Vue3定时器进度条

可以使用Vue3定时器实现进度条的动画效果。

  
    import { ref, onMounted } from 'vue';
    
    export default {
      setup() {
        const progress = ref(0);
        
        // 定时器调用函数
        function increaseProgress() {
          if (progress.value < 100) {
            progress.value++;
          } else {
            clearInterval(timerId);
          }
        }
        
        // 组件挂载时
        onMounted(() => {
          setInterval(increaseProgress, 20);
        });
        
        return {
          progress
        }
      }
    }
  

七、Vue定时器的使用

Vue3中定时器的使用与原生JavaScript相同，可以使用setInterval()或setTimeout()函数。

  
    import { ref, onMounted } from 'vue';
    
    export default {
      setup() {
        let timerId = null;
        const count = ref(0);
        
        // 定时器调用函数
        function increaseCount() {
          count.value++;
        }
        
        // 组件挂载时
        onMounted(() => {
          timerId = setInterval(increaseCount, 1000);
        });
        
        // 清除定时器
        function clearTimer() {
          clearInterval(timerId);
        }
        
        return {
          count,
          clearTimer
        }
      }
    }
  

八、Vue3定时器定时任务

可以使用Vue3定时器实现定时任务的调度。

  
    import { ref, onMounted } from 'vue';
    
    export default {
      setup() {
        const count = ref(0);
        
        // 定时器调用函数
        function doSomething() {
          // ...
        }
        
        // 定时任务调度函数
        function scheduleTask() {
          setInterval(doSomething, 3000);
        }
        
        // 组件挂载时
        onMounted(() => {
          scheduleTask();
        });
        
        return {
          count
        }
      }
    }
  

九、Vue3定时器加到1000停止

可以使用Vue3定时器加到1000停止。

  
    import { ref, onMounted } from 'vue';
    
    export default {
      setup() {
        let timerId = null;
        const count = ref(0);
        
        // 定时器调用函数
        function increaseCount() {
          if (count.value < 1000) {
            count.value++;
          } else {
            clearInterval(timerId);
          }
        }
        
        // 组件挂载时
        onMounted(() => {
          timerId = setInterval(increaseCount, 1000);
        });
        
        // 清除定时器
        function clearTimer() {
          clearInterval(timerId);
        }
        
        return {
          count,
          clearTimer
        }
      }
    }