vue快取元件是什麼意思

在vue中，快取元件是「keep-alive」，是一個抽象元件；它自身不會渲染一個 DOM 元素，也不會出現在元件的父元件鏈中。快取元件主要用於保留元件狀態或避免重新渲染，當它包裹動態元件時，會快取不活動的元件範例，而不是銷燬它們。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

在vue中，快取元件是「keep-alive」，是一個抽象元件。

快取元件「keep-alive」

keep-alive是Vue的內建元件，包裹動態元件時，會將不活動的元件範例留在記憶體中，優化請求，防止DOM重新渲染

官方檔案：

主要用於保留元件狀態或避免重新渲染，當它包裹動態元件時，會快取不活動的元件範例，而不是銷燬它們。

（1）元件快取不是持久化，它只是在應用執行期間不會重新渲染，如果頁面重新整理還是會回到初始狀態。

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

（3） 要求被切換到的元件都有自己的名字，不論是通過元件的 name 選項還是區域性/全域性註冊。

（4）元件生命週期勾點和快取

（5）include 和 exclude 屬性允許元件有條件地快取。二者都可以用逗號分隔字串、正規表示式或一個陣列來表示。

<!-- 逗號分隔字串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正規表示式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 陣列 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先檢查元件自身的 name 選項，如果 name 選項不可用，則匹配它的區域性註冊名稱 (父元件 components 選項的鍵值)。匿名元件不能被匹配。【學習視訊分享：、】

使用 快取元件 的一些問題

問題1：如果快取的元件過多，或者是把不必要的元件也快取了，會造成記憶體佔用過多。

問題2：會導致需要更新的卻被快取了，如detail元件被快取就不會更新了。

策略：把那些重要,高頻的（如主頁），或者是不怎麼變化的元件快取下來。

解決：給要快取的路由做個標記，然後在載入路由時，動態決定是否要快取。更加精確控制要快取的元件

元件快取的優化寫法：

在定義路由時，額外新增路由[元資訊]，來補充一些資訊要素。

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

在app.vue中根據meta元資訊來決定是否快取元件

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

（學習視訊分享：、）

以上就是vue快取元件是什麼意思的詳細內容，更多請關注TW511.COM其它相關文章！