VUE简单的定时器实时刷新的实现方法

　　

说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教! ! !

　　

我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下。

　　

<>强思路
　　

　　

其实思路很简单,首先要了解vue的生命周期和vue的内置函数,其思路就是先定义一个定时器,然后去定时请求后台,到最后关闭这个定时器,哈哈,是不是都是废话,但是确实如此,你们可以先去尝试一下。

　　

<强>这个小功能实现的自我总结
　　

　　

一开始我感觉很简单,不就是个心跳吗,在方法中定义一个计时器函数返回一个setInterval和一个getData函数,在定时器中调用getData,然后在创造中去调用,其中就会有一个问题,就是刚进来页面不会有数据,为什么想必大家肯定会知道,就是这是调用了一个定时器只有时间到了以后才会去请求后台,这个不是很好解决吗,在创建中在调用一次getData不就好了吗,嗯,我就这样做了,虽然我感觉不是很合理,啊啊啊啊,好烦,第一次写不知道如何写,还是用代码来表达,这样比较清楚........

　　

第一版,这样很不合理,因为这样会加载页面发送两次数据,而且还有一个很大的雷,就是setInterval在网页卸载是不会关掉,而且你再次进入这个页面时,定时器会加速,这个错误应该是因为vue切换页面不会刷新的原因吧,请大佬指教。

　　 　　 　　& lt; script> 　　出口默认{ 　　创建(){ 　　this.timer () 　　this.getData () 　　} 　　方法:{//这是一个获取数据 　　getData () { 　　… 　　}//这是一个定时器 　　计时器(){ 　　返回setInterval()=祝辞{ 　　this.getData () 　　},5000) 　　} 　　}, 　　摧毁了(){ 　　clearInterval (this.timer) 　　} 　　} 　　& lt;/script> 　　 　　之前 　　 　　

第二版,我进行了改进,我把setInterval换成了setTimeout,因为setTimeout只执行一次,所以要靠函数去驱动它,然后我用到了更新,它也有一个弊端,就是有某一个数据更新,它就会触发,所以有时会执行多次。

　　 　　 　　& lt; script> 　　出口默认{ 　　创建(){ 　　this.getData () 　　} 　　方法:{//这是获取数据的函数 　　getData () { 　　… 　　}//这是一个定时器 　　计时器(){ 　　返回setTimeout()=祝辞{ 　　this.getData () 　　},5000) 　　} 　　}, 　　更新(){ 　　this.timer () 　　} 　　摧毁了(){ 　　clearTimeout (this.timer) 　　} 　　} 　　& lt;/script> 　　 　　之前 　　 　　

最终版
　　

　　

监只听列表要它变化就去触发定时器,这样就解决了更新的多次触发。

　　 　　 　　& lt; script> 　　出口默认{ 　　数据(){ 　　返回{ 　　列表:[]//获取的数据列表 　　} 　　} 　　创建(){ 　　this.getData () 　　} 　　方法:{//这是获取数据的函数 　　getData () { 　　… 　　}//这是一个定时器 　　计时器(){ 　　返回setTimeout()=祝辞{ 　　this.getData () 　　},5000) 　　} 　　}, 　　看:{ 　　列表(){ 　　this.timer () 　　} 　　} 　　摧毁了(){ 　　clearTimeout (this.timer) 　　} 　　} 　　& lt;/script> 　　 　　

<强>总结
　　

　　

主要就是要了解vue的钩子函数。可能漏洞很多,希望大佬多多指教,还有就是第一次写,有点词穷,请大家多多担待。

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

VUE简单的定时器实时刷新的实现方法