Vue2中父子組件,如果有Keep-alive,生命周期執行順序有什么變化
1. vue2中父子組件,如果有keep-alive,生命周期執行順序有什么變化
在 Vue 2 中,如果你使用了 keep-alive 來包裹子組件,生命周期鉤子的執行順序會有所改變。
keep-alive 組件提供了一個抽象層來緩存子組件,使得當子組件被切換出去再切回來時,它的狀態能夠被保留下來,而不是重新創建和掛載。
1.1. 不使用 keep-alive 的生命周期順序
- 父組件 beforeCreate
- 父組件 created
- 父組件 beforeMount
- 子組件 beforeCreate
- 子組件 created
- 子組件 beforeMount
- 子組件 mounted
- 父組件 mounted
1.2. 使用 keep-alive 的生命周期順序
當使用 keep-alive 纏繞在子組件外面時,情況會有所不同。keep-alive 是 Vue 提供的一個抽象組件,它可以緩存不活動的組件實例而不是銷毀它們。這意味著當切換到其他組件時,這些組件的狀態會被保存下來,而不會重新初始化。
1.2.1. 初次進入緩存區域
初次進入時,與不使用 keep-alive 相似,因為需要創建并掛載組件。但是,在激活或停用組件時,會有額外的鉤子被調用。
- 父組件 beforeCreate
- 父組件 created
- 父組件 beforeMount
- 子組件 beforeCreate
- 子組件 created
- 子組件 beforeMount
- 子組件 mounted
- 父組件 mounted
- 子組件 activated (如果使用了 keep-alive)
1.2.2. 切換離開緩存區域
當從一個被 keep-alive 纏繞的組件切換到另一個組件時:
- 子組件 deactivated (離開緩存區域前觸發)
- 新組件 beforeCreate...mounted (新組件的生命周期鉤子按照正常的順序觸發)
1.2.3. 再次進入緩存區域
當再次回到之前被 keep-alive 纏繞的組件時:
子組件 activated (回到緩存區域后觸發)
注意,由于 keep-alive 的緩存機制,當再次激活被緩存的組件時,不會重新觸發 beforeCreate、created、beforeMount 和 mounted 鉤子,而是直接觸發 activated 鉤子。
1.3. 總結
- 首次加載:keep-alive 對于組件的首次加載沒有影響,所有生命周期鉤子都會按正常順序觸發。
- 切換離開:當組件被切換出去時,會觸發 deactivated 鉤子。
- 再次進入:當組件再次被激活時,會觸發 activated 鉤子,而不是重新初始化。
activated 和 deactivated 是 keep-alive 特有的生命周期鉤子,它們用于處理組件被激活或停用時的行為。這些鉤子可以用來執行一些操作,例如數據刷新或資源釋放等。
請確保在 Vue 項目的開發過程中,根據官方文檔來了解最新的生命周期鉤子和 keep-alive 的行為。