Vue使用定時器定時刷新頁面

1. 需求說明

在前端開發中，往往會遇到頁面需要實時刷新數據的情況，給用戶最新的數據展示。

2. 邏輯分析

如果需要數據實時更新，我們自然是需要使用定時器，不斷的調用接口數據，會相對的消耗內存。

3. 代碼示例

data(){
    return {
        intervalId:null
    }
},
methods:{
   // 定時刷新數據函數
    dataRefreh() {
      // 計時器正在進行中，退出函數
      if (this.intervalId != null) {
        return;
      }
      // 計時器為空，操作
      this.intervalId = setInterval(() => {
        console.log("刷新" + new Date());
        this.initData(); //加載數據函數
      }, 5000);
    }, 
    // 停止定時器
    clear() {
      clearInterval(this.intervalId); //清除計時器
      this.intervalId = null; //設置為null
    },
},
created(){
    this.dataRefreh();
},
destroyed(){
    // 在頁面銷毀后，清除計時器
    this.clear();
}

4. 代碼分析

• 首先選擇數據刷新的時機，在created中。
• 聲明計時器，與數據刷新函數。
• 在頁面銷毀的時機（destroyed），關閉計時器等耗時操作。

本文轉自：https://blog.csdn.net/qq_41115965/article/details/102722540