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

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

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

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

緩存組件“keep-alive”

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

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

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

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

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

（3） 要求被切換到的組件都有自己的名字，不論是通過組件的 name 選項還是局部/全局注冊。

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

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

<!-- 逗號分隔字符串 --> <keep-alive include="a,b">   <component :is="view"></component> </keep-alive>  <!-- 正則表達式 (使用 `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 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。【學(xué)習(xí)視頻分享：vue視頻教程、web前端視頻】

使用 緩存組件 的一些問題

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

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

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

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

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

在定義路由時，額外添加路由[元信息]，來補充一些信息要素。

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

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

<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前端開發(fā)、編程基礎(chǔ)視頻）