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()的定时执行模板就形成了，是很容易运用的。