當使用 keep-alive 緩存組件時，組件中的定時器可能會在組件被緩存后繼續運行，從而干擾其他組件的邏輯。為了避免這種情況，可以通過以下方法解決：
1. 在組件的 deactivated 鉤子中清理定時器
keep-alive 為緩存的組件提供了 activated 和 deactivated 生命周期鉤子。可以在 deactivated 鉤子中清理定時器，確保組件被緩存時不會繼續運行定時器。
export default {data() {return {timer: null};},activated() {// 組件被激活時重新啟動定時器this.startTimer();},deactivated() {// 組件被緩存時清理定時器this.clearTimer();},methods: {startTimer() {this.clearTimer(); // 防止重復設置定時器this.timer = setInterval(() => {console.log('定時器運行中...');}, 1000);},clearTimer() {if (this.timer) {clearInterval(this.timer);this.timer = null;}}}
};
2. 使用 beforeDestroy 鉤子清理定時器
如果組件可能會被銷毀（例如，當 keep-alive 的 max 屬性限制了緩存數量時），可以在 beforeDestroy 鉤子中清理定時器。
export default {data() {return {timer: null};},beforeDestroy() {this.clearTimer();},methods: {startTimer() {this.clearTimer();this.timer = setInterval(() => {console.log('定時器運行中...');}, 1000);},clearTimer() {if (this.timer) {clearInterval(this.timer);this.timer = null;}}}
};
keep-alive 的實現原理
keep-alive 是 Vue 的一個內置抽象組件，用于緩存動態組件或路由組件，避免組件重復創建和銷毀。其核心原理如下：
- 緩存組件實例：
當組件首次加載時，keep-alive 會將組件實例緩存到 this.cache 對象中。 緩存的組件實例以組件的 key
為鍵，組件的虛擬節點（vnode）為值。 - 復用緩存實例：
當再次切換到已緩存的組件時，keep-alive 會從 this.cache 中取出對應的組件實例，而不是重新創建。
通過調整 this.keys 的順序，確保最近使用的組件實例始終在緩存列表的末尾。 - 生命周期管理：
keep-alive 引入了 activated 和 deactivated 生命周期鉤子。 當組件被激活時觸發
activated，當組件被緩存時觸發 deactivated。 - 清理緩存：
如果設置了 max 屬性，當緩存的組件數量超過 max 時，會清理最早緩存的組件。
通過 pruneCacheEntry 函數銷毀組件實例并從緩存中移除。
