Vue中定时刷新数据 / 网络研习社#73

定时刷新数据好像是一个蛮普遍的需求，比如每秒刷新交易价格、每秒刷新挖矿产出...... 每少刷新肯定是要用到定时器的功能，刷新数据是要用到查询接口，这两者结合就可以实现定时刷新数据的目的。

实现定时功能

 //得到当前时间
let getTimestamp = function(){
    that.timestamp = Date.parse(new Date()) * 1e-3
}
//设置定时器以更新当前时间
let timer = setInterval(getTimestamp, 3000)
// 通过$once来监听定时器，在beforeDestroy钩子时被清除。
this.$once('hook:beforeDestroy', () => {
    clearInterval(timer)
})

设置每3秒更新一次的定时器，切换页面则关闭定时器。

查询数据

computed: {
    orderCreatedInTime(){
        //订单剩余时间
        let tsteemOtcLists = this.orderCreated()
        tsteemOtcLists.forEach(item => {
            item.leftTime = (item.submitTime + this.orderValidity) - this.timestamp
        })
        return tsteemOtcLists
    }
}

实时更新数据一般使用computed的功能，timestamp每更新一次，它就会重新计算一次，以实现实时更新的目的。它可以返回几乎任何的数据，唯一有点不足的是不能像函数一样传入参数。

定时器和computed结合就可以实现几乎所有的实时刷新的功能啰！