// ======================更新于2020.09.21============================START
以下清除定时器的旧方法:
1、在data函数里面进行定义定时器名称
2、在beforeDestroy()生命周期内清除定时器
这种做法的缺点是:
(1)vue实例中需要有这个定时器的实例,感觉有点多余;
(2)创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护;
新的清除定时器方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。优点是使得代码可读性更强,一目了然。以下是完整代码:
直接在需要定时器的方法或者生命周期函数中声明并销毁
export default{ methods:{ fun1(){ const timer = setInterval(()=>{ //需要做的事情 console.log(11111); },1000); this.$once(\'hook:beforeDestroy\',()=>{ clearInterval(timer); timer = null; }) } } }
// ======================更新于2020.09.21============================END
在页面中需要定时刷新局部数据,在数据变化是否频繁的情况下,没有必要使用webSocket,因为数据变化频繁,数据实时变化太快看不清楚。因此页面会定时调用后台接口以达到实时刷新数据的效果。
1、在data中定义一个定时器变量,timer
2、在mounted中把定时器的复制为timer
3、页面离开前,在beforeDestroy 中清除定时器timer
data() { return { timer:null, //定时器名称 } }, created() { this.getHangTotal(); }, mounted() { this.timer = setInterval( this.getHangTotal, 10000 ); }, beforeDestroy(){ clearInterval(this.timer); // 清除定时器 this.timer = null; }, methods: { getHangTotal(){ //………… } }