博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
VUE简单的定时器实时刷新
阅读量:6706 次
发布时间:2019-06-25

本文共 947 字,大约阅读时间需要 3 分钟。

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

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

思路

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

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

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

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

复制代码

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

复制代码

最终版

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

复制代码

总结

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

笑看人生

转载于:https://juejin.im/post/5c42ebb3f265da616e4cb526

你可能感兴趣的文章
PHP执行原理
查看>>
AI大神贾扬清确认将离开Facebook,加入阿里硅谷研究院
查看>>
使用Visual Studio Code进行Swift开发
查看>>
Node.js 8.9 LTS版本发布
查看>>
CodeOne 主题演讲:Java,未来已来
查看>>
一文带你快速读懂.NET CLI
查看>>
Alluxio在多级分布式缓存系统中的应用
查看>>
百度云BaaS体系揭秘,突破共识机制、单机计算和串行处理三大瓶颈
查看>>
Mozilla公布WebVR API标准草案
查看>>
到底什么才是业务架构?
查看>>
基础设施即代码:Terraform和AWS无服务器
查看>>
敏捷的忠实拥护者David Hussman于8月18日去世
查看>>
新书问答:Software Wasteland
查看>>
Atlassian发布事故管理解决方案Jira Ops
查看>>
书评 —— 《Go语言编程》
查看>>
Apache HBase的现状和发展
查看>>
反模式的经典 - Mockito设计解析
查看>>
Zip Slip目录遍历漏洞已影响多个Java项目
查看>>
独家揭秘:微博深度学习平台如何支撑4亿用户愉快吃瓜?
查看>>
Visual Studio 15.7预览版4改进Git、C++支持
查看>>