keep-alive理解及注意事項
keep-alive 是 vue 中內(nèi)置組件，用 keep-alive 包裹的組件，用來緩存和保留當(dāng)時狀態(tài)的組件實例，而不是銷毀它們。
主要是保存當(dāng)時的組件狀態(tài)和避免重復(fù)創(chuàng)建，避免重復(fù)渲染導(dǎo)致的性能問題。
特點
它是一個抽象組件，本身不會渲染一個 dom 元素，也不會出現(xiàn)在組件中的父組件鏈上 當(dāng)組件在 keep-alive 內(nèi)被切換的時候，組件內(nèi)的 activated和deactivated這兩個生命周期鉤子函數(shù)會被執(zhí)行。組件一旦被緩存，再次渲染就不會執(zhí)行 created、mounted 生命周期鉤子函數(shù)。要求同時只有 1個 子組件被渲染 函數(shù)式組件不能用，因為它們沒有緩存實例。
使用場景
官方例子：
<!-- 1 動態(tài)組件（所謂動態(tài)組件就是讓多個組件使用同一個掛載點，并動態(tài)切換。） -->
<keep-alive>
<component is="currentComponent"></component>
</keep-alive>
<!-- 2 多個條件判斷的子組件 -->
<keep-alive>
<comp-a v-if="true"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
<!-- 3 transition -->
<transition>
<keep-alive>
<component is="currentComponent"></component>
</keep-alive>
</transition>
<!-- 4 結(jié)合vue-router -->
<keep-alive>
<router-view></router-view>
</keep-alive>
props
include白名單 只有名稱匹配的組件會被緩存exclude黑名單 任何匹配的組件都不會被緩存max最多緩存多少實例，一旦達(dá)到這個數(shù)字，新實例被創(chuàng)建之前，會銷毀已緩存組件中最久沒有被訪問到的實例---LRU 算法
include 和 exclude 首先檢查組件的 name 屬性，如果 name 不可用，則匹配局部注冊名稱。
匿名組件不能被匹配。
需要注意的地方
關(guān)于生命周期
當(dāng)引入 keep-alive 的時候，
頁面第一次進(jìn)入，生命周期鉤子的觸發(fā)順序：created --- mounted----activated;
退出時觸發(fā) deactivated；
當(dāng)再次進(jìn)入的時候，只觸發(fā) activated。
返回 dom 不讓其重新刷新，只執(zhí)行一次的放在 mounted 中；
組件每次進(jìn)去執(zhí)行的方法放在 activated 中。
關(guān)于注冊組件
在 keep-alive 中直接添加 include，cachedViews----Array 類型：包含 vue 文件的組件 name 都將被緩存起來；反之 exclude 則是不會被緩存；
exclude 的優(yōu)先級大于 include。
也就是說：當(dāng) include 和 exclude 同時存在的時候，exclude 會生效，include 不會生效的。
讓我們一起攜手同走前端路！
關(guān)注公眾號回復(fù)【加群】即可
● 三欄響應(yīng)式布局(左右固寬中間自適應(yīng))的5種方法
評論
圖片
表情