我在a頁面寫一個定時，讓他每秒鍾打印一個1，然后跳轉到b頁面，此時可以看到，定時器依然在執行。這樣是非常消耗性能的。如下圖所示：

 

解決方法1：

首先我在data函數里面進行定義定時器名稱：

 

 

 

 

data() { return { timer: null // 定時器名稱 } },

然后這樣使用定時器：

 

 

 

this.timer = (() => {
    // 某些操作
}, 1000)

 

最后在beforeDestroy()生命周期內清除定時器：

beforeDestroy() { clearInterval(this.timer); this.timer = null; }

方案1有兩點不好的地方，引用尤大的話來說就是：

• 它需要在這個組件實例中保存這個 timer，如果可以的話最好只有生命周期鈎子可以訪問到它。這並不算嚴重的問題，但是它可以被視為雜物。
• 我們的建立代碼獨立於我們的清理代碼，這使得我們比較難於程序化的清理我們建立的所有東西。

解決方案2：

該方法是通過$once這個事件偵聽器器在定義完定時器之后的位置來清除定時器。以下是完整代碼：

const timer = setInterval(() =>{                    

 // 某些定時器操作 }, 500); // 通過$once來監聽定時器，在beforeDestroy鈎子可以被清除。 this.$once('hook:beforeDestroy', () => { clearInterval(timer); })

方案2要感謝@zzx18023在評論區提供出的解決方案。類似於其他需要在當前頁面使用，離開需要銷毀的組件（例如一些第三方庫的picker組件等等），都可以使用此方式來解決離開后以后在背后運行的問題。

綜合來說，我們更推薦使用方案2，使得代碼可讀性更強，一目了然。如果不清楚$once、$on、$off的使用，這里送上官網的地址教程，在程序化的事件偵聽器那里。