使用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可以监听到数据发生的变化，所以不用刷新整个页面，当数据发生改变时，会自动修改对应的值。

代码模板

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