小编给大家分享一下vue.js如何让网页定时刷新，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
vue.js让网页定时刷新的方法：1、执行函数【setTimeout(function(){}, milliseconds)】；2、在执行定时器前先执行一次获取接口数据的操作函数。
vue.js让网页定时刷新的方法：
js有两种定时器
setInterval(function(){}, milliseconds)——会不停的调用函数
setTimeout(function(){}, milliseconds)——只执行函数一次
乍看之下，setInterval会符合我们的业务需求，然而也需要注意一些坑，单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关, 用通俗话说就是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。
但是setTimeout是自带清除定时器的，因此正确解决方法如下：
data(){
return {
timer:null, //定时器名称
}
},
mounted(){
this.queryInfo();
this.timer = setInterval(() => {
setTimeout(this.queryInfo, 0)
}, 1000*60)
},
methods: {
queryInfo(){
//do something
},
},
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
}说明: 1.在执行定时器前先执行一次获取接口数据的操作函数, 否则接口会1分钟后才调用
2.为了避免退出当前页面后,在其他页面也继续调用接口,退出前需要清除定时器.
清除定时器优化方案
上面的清除定时器方案有两点不好:
它需要在这个组件实例中保存这个 timer，如果可以的话好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西
优化方案:
通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器.
const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})看完了这篇文章，相信你对vue.js如何让网页定时刷新有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
