vue项目实现每隔1分钟刷新当前页面

// 时间差计算
difference: function (row) {
var dateBegin = new Date(row.beginTime);
var dateEnd = new Date(row.endTime);
var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
console.log(
"相差" +
dayDiff +
"天" +
hours +
"小时" +
minutes +
"分钟" +
seconds +
"秒"
);
this.seconds = seconds;
this.minutes = minutes;

             return this.seconds
},

https://www.cnblogs.com/cheyunhua/p/16198154.html

有个需求是: 需要实时获取接口数据,每隔1分钟获取一次, 我们可以通过定时刷新页面来达到效果.

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);                                    
}）

https://www.cnblogs.com/netcore-vue/p/15016242.html