vue从后台获取新数据后刷新_vue项目中实现定时刷新页面（重新渲染数据实时更新）...

需求: 每隔一分钟自动刷新一下当前页面，同时发送请求，重新渲染数据，以到达实时更新。

开始：

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.为了避免退出当前页面后