vue页面实现定时刷新

时间:2024-04-02 19:51:05

根据项目订单需要几分钟去定时刷新一下获取最新订单情况,既然是定时,只能用setInterval();

但是该什么时候刷新,什么时候需要清除定时器?

首先看一下vue的生命周期:

vue页面实现定时刷新

beforeCreate    实例初始化之后,此时数据和时间都没有;

created             beforeCreate之后紧接着的钩子就是创建完毕created,此时可以读取数据data的值,但是DOM没有生成;

beforeMount     挂载之前,能成功渲染dom节点;

mounted           mounted也就是挂载完毕阶段,到了这个阶段,数据就会被成功渲染出来;

beforeUpdate   在修改vue实例的data时,在修改vue就会自动帮我们更新渲染视图,在检测到我们要修改数据的时候,更新渲染视图之前就会触发钩子beforeUpdate;

updated             此阶段为更新渲染视图之后,此时再读取视图上的内容,已经是最新的内容;

deforeDestroy  调用实例的destroy( )方法可以销毁当前的组件,在销毁前,会触发beforeDestroy钩子;

destroyed         成功销毁之后,会触发destroyed钩子,此时该实例与其他实例的关联已经被清除,它与视图之间也被解绑;

actived              keep-alive组件被**的时候调用;

deactivated       keep-alive 组件停用时调用。

 

从以上来看,我们的定时放在created()或者mounted()都是可以的;

vue页面实现定时刷新

销毁定时放在 destroyed   

vue页面实现定时刷新   

这个需要注意的点是setInterval  中this的指向,如果你使用箭头函数的话即可不用担心;

最后这个销毁跟我需求不一样,我的项目是tab切换页面并没有销毁,我们只是做了路由的切换,

所以我采用了vue的路由守卫,beforeRouteLeave离开路由之前执行的函数

vue页面实现定时刷新

如果你的需求跟我一样的话不妨试试,呵呵~