vue项目中轮询状态更改方式(钩子函数)
更新时间:2022年10月21日 08:30:28 作者:骑上我心爱的小摩托
这篇文章主要介绍了vue项目中轮询状态更改方式(钩子函数),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue项目中轮询状态更改
在实际项目中,对于实时存储改变的数据,如果不是使用websoct,就需要使用到轮询,对于轮询实际是前端设置的定时器,不停存储获取数据并进行更改。
而对于退出该界面后,轮询逻辑依然在定时器的执行中进行,此时需要用到钩子函数判断路由离开状态后,进行清除定时器
//离开当前页面 beforeRouteLeave(to, from, next) { window.clearInterval(this.myInterval); //清除定时器 next(); },
vue轮询方法及清除
<script> var Vue = new Vue({ el: '#app', data: { timer: null, }, created() { this.pollfun() }, methods: { //轮询 pollfun() { this.timer = window.setInterval(() => { setTimeout(() => { this.getDetes() }, 0) }, 3000) }, //清除轮询 clearfun() { clearInterval(this.timer); this.timer = null; } }, //离开页面清除 destroyed() { window.clearInterval(this.timer) } }) </script>
destroyed 是监听页面销毁钩子函数
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
这篇文章主要给大家介绍了关于Vue在chrome44偶现点击子元素事件无法冒泡的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧2019-12-12Element el-checkbox-group v-model不支持对象(object)解决方案
本文主要介绍了Element el-checkbox-group v-model不支持对象(object)解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论