解决vue页面的定时刷新问题

背景描述：
我使用的是vue+element 开发系统，在页面上有一个系统消息，这个消息的数量随时可能发生变化的，比如我已经看了某一条，那这个未读消息数量就应该减少。

于是，这个时候我们就要使用setInterval()了。那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢？这就需要我们了解vue的生命周期。

贴下我的代码供参考：

另外，我在查阅资料时看到有这样情况的，我也展示出来大家可以注意下。

注意：使用setInterval时this指向的问题。如果我们直接用this.timer = setInterval(function(){要触发的函数}) 是会报错的。因为这样的话this的指向为window，但是我们要触发的函数是挂载在vm实例上面的。所以这个时候就是箭头函数发挥用处的时候了。我们可以直接这样写this.timer = setInterval(() => {要触发的函数}).