vue元件裡定時器銷毀問題

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

解決方法1：

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

data()         

},

this.timer = (() => , 1000)

beforedestroy() 

解決方案2：

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

const timer = setinterval(() =>, 500);

// 通過$once來監聽定時器，在beforedestroy鉤子可以被清除。

this.$once('hook:beforedestroy', () => )

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

vue元件裡定時器銷毀問題

我在a頁面寫乙個定時器，讓他每秒鐘列印乙個1，然後跳轉到b頁面，此時可以看到，定時器依然在執行。這樣是非常消耗效能的。const timer setinterval 1000 通過 once來監聽定時器，在beforedestroy鉤子可以被清除。this once hook beforedestr...

vue元件裡定時器銷毀問題

解決方案1 data this.timer 1000 最後在beforedestroy 生命週期內清除定時器 beforedestroy 方案1有兩點不好的地方 解決方案2 該方法是通過 once這個事件偵聽器器在定義完定時器之後的位置來清除定時器。以下是完整 const timer setinte...

Vue定時器輪詢 及 銷毀定時器

專案中我們經常需要實現輪詢 每隔幾秒請求一次介面重新整理資料 一般都會使用setinterval，但要注意單純使用它可能導致頁面卡死 原因是setinterval不會清除定時器佇列，每重複執行1次都會導致定時器疊加，卡死。但是settimeout是自帶清除定時器的 所以可以疊加使用 window.s...