原文：vue中 keep-alive的作用 和activated 和 deactivated 生命周期理解
keep alive 簡介 keep alive是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。 用法 props include 字符串或正則表達，只有匹配的組件會被緩存 exclude 字符串或正則表達式，任何匹配的組件都不會被緩存 . . 新增include和exclude屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串 正則表達式或一個數組來表示： max . ...
2022-01-12 14:32 0 1389 推薦指數：
相關推薦
<keep-alive>包裹的動態組件會被緩存，它是一個抽象組件，它自身不會渲染一個dom元素，也不會出現在父組件鏈中。當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鈎子函數將會被對應執行。 如< ...
keep-aliveProps：include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。max - 數字。最多可以緩存多少組件實例。用法：<keep-alive> 包裹動態組件時，會緩存不活動的組件實例 ...
1、通過keep-alive和router-view實現路由緩存，具體代碼如下：在app.vue： <router-view v-if="!$route.meta.keepAlive"/> <keep-alive> <router-view v-if ...
keep-alive 生命周期 父組件 組件A： 組件B： 切換組件A和組件B，控制台打印： 結論： 首次激活時，activated都在mounted后。 再次激活時，本組件只走activated（另外一組件先失活deactivated） 組件失活時，均不 ...
beforecreated： 創建前狀態 el 和 data 並未初始化 created: 創建完畢狀態 完成了 data 數據的初始化，el沒有 beforeM ...
keep-alive緩存（ 一般都要將首次創建的組件緩存，提高性能） keep-alive對應兩個生命周期,activated(){} deactivated ...
keep-alive用法 <keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。 include: 字符串或正則表達式。只有匹配的組件會被緩存。 exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存 ...