Vue中使用計時器實時刷新頁面數據

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.alear();
}

---

4. 代碼分析

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