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  {
          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  {
          timerId = setInterval(increaseCount, 1000);
        });
        
        // 清除定時器
        function clearTimer() {
          clearInterval(timerId);
        }
        
        return {
          count,
          clearTimer
        }
      }
    }