Vue页面自动刷新

在工作过程中，遇到了一个需求，前端进入页面时需要定时刷新页面，加载数据，这里不做过多赘述，直接把代码分享出来！

实现效果如下：

代码如下：

<template>
  <div class="hello"></div>
</template>

<script>
export default {
  data() {
    return {
      intervalId: null,
    };
  },
  created() {
    this.dataRefreh();
  },
  destroyed() {
    // 在页面销毁后，清除计时器
    this.clear();
  },
  methods: {
    test() {
      console.log("1");
    },

    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(async () => {
        this.test();
        //调用要刷新的方法
      }, 1000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
  },
};
</script>

欢迎关注微信公众号：陪着小蜗去散步