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如何重置data、组件中的data为什么是一个函数、为什么new Vue里的data可以是一个对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了解决vue中的无限循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue监听键盘事件的快捷方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue项目实现下载zip压缩包方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue中template的三种写法示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了Vue封装Axios请求和拦截器的步骤，帮助大家更好的对axios进行封装并将接口统一管理，同时为请求和响应设置拦截器interceptors。，感兴趣的朋友可以了解下2020-09-09
在 Vue 3 中,watch 仍然是一种用于监听数据变化并执行相应操作的方式,不过在组合式 API 中,watch 的使用方式与选项式 API 略有不同,这篇文章主要介绍了Vue3.0监听器watch与watchEffect,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue中封装echarts公共组件过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
在vue中使用vant TreeSelect分类选择组件操作
这篇文章主要介绍了在vue中使用vant TreeSelect分类选择组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论