使用Vue做一个定时刷新的页面

使用Vue做一个定时刷新的页面

前置知识

1. setInterval

官方上的定义：

setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。

在窗口和工作接口上提供的 setInterval() 方法重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。它返回一个时间间隔ID，该ID唯一地标识时间间隔，因此您可以稍后通过调用 clearInterval() 来删除它。

区别于 setTimeOut:

setTimeout() 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。并不会重复执行！

2. Vue Router中的 beforeRouteEnter 与 beforeRouteLeave

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

预期效果

当打开页面时，即开始计时，设定一个时间来定时刷新数据，当跳转到其他页面时，停止刷新。由于Vue可以监听到数据发生的变化，所以不用刷新整个页面，当数据发生改变时，会自动修改对应的值。

代码模板

export default {
    methods: {
        async getData() {
            // do something
        }
    },
    beforeRouteEnter(to, from, next) {
        next(async vm => {
            vm.timer = setInterval(() => {
                vm.getData();
            }, 1 * 1000); // 1秒钟执行一次
        })
    },
    beforeRouteLeave(to, from, next) {
        clearInterval(this.timer);
        next();
    }
}