Vue 使用计时器刷新数据

最新推荐文章于 2025-09-12 15:57:17 发布

转载最新推荐文章于 2025-09-12 15:57:17 发布 · 485 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_41115965/article/details/102722540

文章标签：

#vue.js #javascript

本文详细介绍了在Vue.js应用程序中如何实现定时数据刷新功能，通过设置定时器定期调用数据加载函数，保持页面数据的实时更新。同时，在组件销毁时，确保正确清理定时器，防止内存泄漏。该方法适用于需要实时数据展示的前端应用场景。

data(){
    return {
        intervalId:null
    }
},
created(){
    this.dataRefreh();
},
destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
},
methods:{
   // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.initData(); //加载数据函数
      }, 5000);
    }, 
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
}