在vue中，緩存組件是“keep-alive”，是一個(gè)抽象組件；它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在組件的父組件鏈中。緩存組件主要用于保留組件狀態(tài)或避免重新渲染，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷(xiāo)毀它們。

前端（vue）入門(mén)到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

在vue中，緩存組件是“keep-alive”，是一個(gè)抽象組件。

緩存組件“keep-alive”

keep-alive是Vue的內(nèi)置組件，包裹動(dòng)態(tài)組件時(shí)，會(huì)將不活動(dòng)的組件實(shí)例留在內(nèi)存中，優(yōu)化請(qǐng)求，防止DOM重新渲染

官方文檔：在動(dòng)態(tài)組件上使用 keep-alive

主要用于保留組件狀態(tài)或避免重新渲染，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷(xiāo)毀它們。

（1）組件緩存不是持久化，它只是在應(yīng)用運(yùn)行期間不會(huì)重新渲染，如果頁(yè)面刷新還是會(huì)回到初始狀態(tài)。

（2） 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在組件的父組件鏈中。

（3） 要求被切換到的組件都有自己的名字，不論是通過(guò)組件的 name 選項(xiàng)還是局部/全局注冊(cè)。

（4）組件生命周期鉤子和緩存

（5）include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來(lái)表示。

<!-- 逗號(hào)分隔字符串 --> <keep-alive include="a,b">   <component :is="view"></component> </keep-alive>  <!-- 正則表達(dá)式 (使用 `v-bind`) --> <keep-alive :include="/a|b/">   <component :is="view"></component> </keep-alive>  <!-- 數(shù)組 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']">   <component :is="view"></component> </keep-alive>

匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊(cè)名稱(chēng) (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。【學(xué)習(xí)視頻分享：vue視頻教程、web前端視頻】

使用 緩存組件 的一些問(wèn)題

問(wèn)題1：如果緩存的組件過(guò)多，或者是把不必要的組件也緩存了，會(huì)造成內(nèi)存占用過(guò)多。

問(wèn)題2：會(huì)導(dǎo)致需要更新的卻被緩存了，如detail組件被緩存就不會(huì)更新了。

策略：把那些重要,高頻的（如主頁(yè)），或者是不怎么變化的組件緩存下來(lái)。

解決：給要緩存的路由做個(gè)標(biāo)記，然后在載入路由時(shí)，動(dòng)態(tài)決定是否要緩存。更加精確控制要緩存的組件

組件緩存的優(yōu)化寫(xiě)法：

在定義路由時(shí)，額外添加路由[元信息]，來(lái)補(bǔ)充一些信息要素。

{    path: '/',    component: () => import('../views/home/index.vue'),    //是否緩存   meta: { isKeepAlive: true }  },

在app.vue中根據(jù)meta元信息來(lái)決定是否緩存組件

<div id="app">   <keep-alive>     <router-view v-if="$route.meta.isKeepAlive"/>   </keep-alive>   <router-view v-if="!$route.meta.isKeepAlive"/> </div>

（學(xué)習(xí)視頻分享：web前端開(kāi)發(fā)、編程基礎(chǔ)視頻）