在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其它相關文章!