VUE简单的定时器实时刷新的实现方法
说明：我只是一个刚入门的小前端，你们可以指导我，但千万不要喷我，虽然我知道我很垃圾！人吗，都是要成长的！大佬，请多多指教！！！
我前段时间刚刚写了一个类似余股票的项目，上边的K线图是要实时去刷新的，所以要用vue做一个心跳，当然大家也可以选择用websocket，大佬们感觉肯定很简单，但是我只是一个刚入门的小前端，特此记录一下。
思路
其实思路很简单，首先要了解vue的生命周期和vue的内置函数，其思路就是先定义一个定时器，然后去定时请求后台，到最后关闭这个定时器，哈哈，是不是都是废话，但是确实如此，你们可以先去尝试一下。
这个小功能实现的自我总结
一开始我感觉很简单，不就是个心跳吗，在methods 中定义一个timer函数返回一个setInterval和一个getData函数，在timer中调用getData， 然后在created中去调用，其中就会有一个问题，就是刚进来页面不会有数据，为什么想必大家肯定会知道，就是这是调用了一个定时器只有时间到了以后才会去请求后台，这个不是很好解决吗，在created 中在调用一次getData不就好了吗，嗯，我就这样做了，虽然我感觉不是很合理，啊啊啊啊，好烦，第一次写不知道如何写，还是用代码来表达，这样比较清楚........
第一版，这样很不合理，因为这样会加载页面发送两次数据，而且还有一个很大的雷，就是setInterval在网页卸载是不会关掉，而且你再次进入这个页面时，定时器会加速，这个BUG应该是因为vue切换页面不会刷新的原因吧，请大佬指教。
<script>
export default {
created() {
this.timer()
this.getData()
}
methods: {
// 这是一个获取数据
getData() {
.....
}
// 这是一个定时器
timer() {
return setInterval(()=>{
this.getData()
},5000)
}
},
destroyed() {
clearInterval(this.timer)
}
}
</script>
第二版，我进行了改进，我把setInterval换成了setTimeout，因为setTimeout只执行一次，所以要靠函数去驱动它，然后我用到了updated，它也有一个弊端，就是有某一个数据更新，它就会触发，所以有时会执行多次。
<script>
export default {
created() {
this.getData()
}
methods: {
// 这是获取数据的函数
getData() {
.....
}
// 这是一个定时器
timer() {
return setTimeout(()=>{
this.getData()
},5000)
}
},
updated() {
this.timer()
}
destroyed() {
clearTimeout(this.timer)
}
}
</script>
最终版
监听list只要它变化就去触发定时器，这样就解决了updated的多次触发。
<script>
export default {
data() {
return {
list: [] // 获取的数据列表
}
}
created() {
this.getData()
}
methods: {
// 这是获取数据的函数
getData() {
.....
}
// 这是一个定时器
timer() {
return setTimeout(()=>{
this.getData()
},5000)
}
},
watch: {
list() {
this.timer()
}
}
destroyed() {
clearTimeout(this.timer)
}
}
</script>
总结
主要就是要了解vue的钩子函数。可能漏洞很多，希望大佬多多指教，还有就是第一次写，有点词穷，请大家多多担待。、
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了在Vue中实现组件切换的三种方法,即使用条件渲染,使用动态组件以及通过点击按钮切换组件,有需要的小伙伴可以了解下2024-11-11
这篇文章主要介绍了vue如何使用文件流进行下载(new Blob)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue等待数据渲染完成后执行下一个方法问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue悬浮窗和聚焦登录组件经验总结, 本文整理了实现悬浮窗以及聚焦登录组件的功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了Vue实现购物车计算总价功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue路径分为绝对路径、相对路径、~+路径 及 别名+路径,在js中,引入带别名的文件路径,不需要在别名前加~ ,在css或者style中引入的需要在路径前面加~,路径以 ~ 开头,其后的部分将会被看作模块依赖,本文给大家介绍vue中引用文件路径问题,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了关于element ui 表格中的常见特殊属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue.sync修饰符与$emit(update:xxx)详解
这篇文章主要介绍了Vue.sync修饰符与$emit(update:xxx),实现思路非常简单，文章介绍了.sync修饰符的作用和使用.sync修饰符的写法，实现代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了详解基于Vue，Nginx的前后端不分离部署教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Vue.js中的watch选项用于监听Vue实例上某个特定的数据变化,下面这篇文章主要给大家介绍了关于Vue3 Watch踩坑实战之watch监听无效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
最新评论