如果我们在页面A中使用了一个定时器，当从页面A跳转到页面B时，如果不手动清除这个定时器，那么它仍旧会执行，这不是我们所期望的。
通常能想到的常规解决办法就是，在data属性中定义一个timer，在代码中启动定时器，然后在组件销毁的时候清除定时器。具体代码如下：
data(){ return{ timer:null } }, methods:{ onStartTimer(){ this.timer = setInterval( () => { // 执行一些操作 }, 1000) } }, beforeDestroy() { clearInterval(this.timer); this.timer = null; } }
但是这里有两个潜在的问题：
它需要在这个组件实例中保存这个timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化地清理我们建立的所有东西。
Vue官方文档给出的解决方案是，在定义timer的时候使用$once指令监听beforeDestroy这个钩子函数。具体代码为：
methods:{ onStartTimer(){ const timer = setInterval( () => { // 执行一些操作 }, 1000) this.$once('hook:beforeDestroy', () => { clearInterval(timer); }) } },
这样就解决了上面所列的两个问题。类似的这种在离开页面时需要销毁的组件都可以采用此方法。
