vue快取元件是什麼意思

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

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

在vue中，快取元件是“keep-alive”，是一個抽像元件。

 快取元件「keep-alive」

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

#官方文件：在動態元件上使用keep-alive

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

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

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

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

（4）元件生命週期鉤子和快取

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

1038fc66b56645805578e2e786c33093
3a9efc80b00b302f797c801d5f73f956
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

227dbf312b29b2dfafd2902d664cd056
fad9f6a14592db518ac5e95030bbb33d
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

1d733825f9bcc4ef626ba6751304bb79
ebb2d94ca87df38137a52379b8767b08
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

符合先檢查元件本身的 name 選項，如果 name 選項不可用，則符合它的局部註冊名稱 (父元件 components 選項的鍵值)。匿名組件不能被匹配。 【學習影片分享：vue影片教學、web前端影片】

#使用 快取元件的一些問題

問題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>

（學習影片分享：web前端開發、程式設計基礎影片）

以上是vue快取元件是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！