Vue定时刷新页面数据
我现在只知道两种最常见的定时刷新方案,一种是利用Vue的内置函数setTimeout、setInterval定时执行,另一种是websocket消息推送。我的需求是,当数据库中的数据发生更新时,前端就要检测并展示出这些数据。这个正确的实现是利用websocket,但是我对websocket没有什么了解,所以这一篇文章先利用vue的内置函数做一个充当,后续发布websocket在vue中的详细使用。
我现在只知道两种最常见的定时刷新方案,一种是利用Vue的内置函数setTimeout、setInterval定时执行,另一种是websocket消息推送。我的需求是,当数据库中的数据发生更新时,前端就要检测并展示出这些数据。这个正确的实现是利用websocket,但是我对websocket没有什么了解,所以这一篇文章先利用vue的内置函数做一个充当,后续发布websocket在vue中的详细使用。在此有点时间记录一下、当做笔记,同时也是为了帮助到同行业的广大开发者。
最终实现见图
要更新的数据为图上的红框中。
下面开始代码实现(这是我现写的模板,不是图中全部的代码):
1.基础模板
<template>
<div>
//利用v-model等实现数据绑定
</div>
</template>
<script>
export default {
data(){
return{
dbList: [], //用于接收findDB方法中的数据
}
},
methods:{
findDB(){ //这个方法是你要获取后台数据的方法
//这里面通过你的axiosUrl获取到一些数据,
}
},
mounted(){ //模板渲染之后调用的,模板渲染之前是created
//刚进页面就能获取到findDB()中的数据
//this.findDB()
}
}
</script>
<style lang="scss" scoped>
</style>
2.setInterval()与setTimeout的区别
书写格式:
xxx(){ //定义一个方法函数
return setTimeout(()=>{ //setInterval换个名字就行了
//要执行的方法句式:this.findDB()
},60000) //设置时间,这里是1分钟
}
最关键:setInterval()成立后会一直执行,setTimeout(),如果没有条件触发,它就只执行一次
3.setInterval()问题没有解决
<template>
<div>
//利用v-model等实现数据绑定
</div>
</template>
<script>
export default {
data(){
return{
dbList: [], //用于接收findDB方法中的数据
}
},
methods:{
findDB(){ //这个方法是你要获取后台数据的方法
//这里面通过你的axiosUrl获取到一些数据,
},
times(){ //定义了一个times()方法来执行定时查询findDB()
return setInterval(()=>{ //setInterval换个名字就行了
this.findDB()
},60000) //设置时间,这里是1分钟
}
},
destroyed() {
clearInterval(this.times) //退出页面后销毁定时方法
},
mounted(){ //模板渲染之后调用的,模板渲染之前是created
//刚进页面就能获取到findDB()中的数据
this.findDB()
this.times() //加载定时任务
}
}
</script>
<style lang="scss" scoped>
</style>
这个定时执行是执行了,销毁方法也调用了,但是退出当前页面后加载的定时任务并没有退出,它还在不断执行,而且在页面在重新进入一次,times()方法又被执行一次,导致了执行查询的速度变快,所以我没做深研究,在这里希望遇到这种情况的开发者注意一下。
4.采用setTimeout实现
上面说过setTimeout只执行一次,想要它不断执行,需要用到触发事件,这个触发的事件不可能是人为触发的,所以我们采用监听方式,思路就是当检测到xx里的值变动时,就触发这个定时事件,对基础模板做出如下调整:
<template>
<div>
//利用v-model等实现数据绑定
</div>
</template>
<script>
export default {
data(){
return{
dbList: [], //用于接收findDB方法中的数据
today: ' ' //定义一个当前时间,数据从findDB()中获取,被watch监听
}
},
watch:{ //监听,监听什么?我们在data中定义一个变量,就监听这个变量
today(){ //被监听的变量,也可以是对象集合等
//当today中的值变化时,我们就触发定时事件
this.times()
}
},
methods:{
findDB(){ //这个方法是你要获取后台数据的方法
//这里面通过你的axiosUrl获取到一些数据,
//怎样为today定义一个变量,那就当前时间,或随机数吧
this.today = new Date()
},
//setTimeout()定时事件
times(){
return setTimeout(()=>{
this.findDB()
},5000)
}
},
mounted(){ //模板渲染之后调用的,模板渲染之前是created
//刚进页面就能获取到findDB()中的数据
this.findDB()
},
destroyed(){ //销毁是不能忘记的
clearTimeout(this.times)
}
}
</script>
<style lang="scss" scoped>
</style>
这样基于setTimeout()的定时执行模板就形成了,是很容易运用的。
更多推荐
所有评论(0)