Vue定时刷新页面数据

我现在只知道两种最常见的定时刷新方案，一种是利用Vue的内置函数setTimeout、setInterval定时执行，另一种是websocket消息推送。我的需求是，当数据库中的数据发生更新时，前端就要检测并展示出这些数据。这个正确的实现是利用websocket，但是我对websocket没有什么了解，所以这一篇文章先利用vue的内置函数做一个充当，后续发布websocket在vue中的详细使用。在此有点时间记录一下、当做笔记，同时也是为了帮助到同行业的广大开发者。
最终实现见图

要更新的数据为图上的红框中。
下面开始代码实现(这是我现写的模板，不是图中全部的代码)：
1.基础模板

2.setInterval()与setTimeout的区别
书写格式：

xxx(){		//定义一个方法函数
return setTimeout(()=>{			//setInterval换个名字就行了
                   //要执行的方法句式：this.findDB()
                },60000)		//设置时间，这里是1分钟
                }

最关键：setInterval()成立后会一直执行，setTimeout(),如果没有条件触发，它就只执行一次
3.setInterval()问题没有解决

这个定时执行是执行了，销毁方法也调用了，但是退出当前页面后加载的定时任务并没有退出，它还在不断执行，而且在页面在重新进入一次，times()方法又被执行一次，导致了执行查询的速度变快，所以我没做深研究，在这里希望遇到这种情况的开发者注意一下。
4.采用setTimeout实现
上面说过setTimeout只执行一次，想要它不断执行，需要用到触发事件，这个触发的事件不可能是人为触发的，所以我们采用监听方式，思路就是当检测到xx里的值变动时，就触发这个定时事件，对基础模板做出如下调整：

这样基于setTimeout()的定时执行模板就形成了，是很容易运用的。