Vue 內置組件keep-alive的使用示例
keep-alive 是Vue內置的組件之一, 主要用於保留組件狀態或避免重新渲染。
作用
在組件切換過程中將狀態保留在內存中,防止重復渲染DOM,減少加載時間及性能消耗,提高用戶體驗。
一、keep-alive 用法
< keep-alive> 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。
和 < transition> 相似,< keep-alive> 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現在組件的父組件鏈中。
當組件在 < keep-alive> 內被切換,它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。
Props:
include – 字符串或正則表達式。隻有名稱匹配的組件會被緩存。
exclude – 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
max – 數字。最多可以緩存多少組件實例。
- include & exclude
如果你隻想緩存部分組件的狀態,可以使用include屬性。
如果你想除掉一些組件,其他的才被緩存,可以使用exlucde屬性。
- max
最多可以緩存多少組件實例。一旦這個數字達到瞭,在新實例被創建之前,已緩存組件中最久沒有被訪問的實例會被銷毀掉。
<keep-alive :max="10"> <component :is="view"></component> </keep-alive>
使用示例:
1.緩存所有頁面:
<keep-alive> <router-view></router-view> <!--這裡是會被緩存的組件--> </keep-alive>
2.根據條件緩存部分頁面
(更多用法見官網API)
<template> <div id="app"> // 1. 將緩存 name 為 newsList 或者 productList 的組件 <keep-alive include='newsList,productList'> <router-view/> </keep-alive> // 2. 將不緩存 name 為 test 的組件 <keep-alive exclude='test'> <router-view/> </keep-alive> </div> </template> <script> export default { name: 'App' } </script>
註意:
還有一步,你必須在需要被緩存狀態的組件的script部分,給組件添加一個name屬性。 如果沒有使用keep-alive緩存狀態的組件,可以不寫name屬性。但是如果使用瞭keep-alive緩存該組件狀態,則此組件必須有這個屬性。並且,這個屬性的值,還必須跟標簽中include屬性的值完全一致,包括大小寫。 以productList.vue組件為例
<template> <!-- 這裡是productList組件的html結構部分 --> </template> <script> export default { name: "productList", //如果使用瞭keep-alive緩存該組件狀態,則此組件必須有這個屬性。 data(){ return {} } </script>
3.結合vue-router,緩存部分頁面
export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home, children: [ { path: 'products', name: 'products', component: products, meta: { keepAlive: true // 需要緩存 } }, { path: 'newsDetails', name: 'newsDetails', component: newsDetails, meta: { keepAlive: false // 不需要緩存 } } ] } ] })
在 App.vue 裡面
<template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { name: 'App' } </script>
二、keep-alive 生命周期
包含在 keep-alive 中創建的組件,會多出兩個生命周期的鉤子: activated 與 deactivated。
1. activated
在 keep-alive 組件激活時調用。
在組件第一次渲染時會被調用,之後在每次緩存組件被激活時調用。
第一次進入緩存路由/組件,在mounted後面,beforeRouteEnter守衛傳給 next 的回調函數之前調用:
頁面第一次進入的時候,鉤子觸發的順序是created->mounted->activated
因為組件被緩存瞭,再次進入緩存路由/組件時,不會觸發這些鉤子:
beforeCreate created beforeMount mounted 都不會觸發。
2. deactivated
在 keep-alive 組件停用(離開路由)時調用。
使用瞭keep-alive就不會調用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀),因為組件沒被銷毀,被緩存起來瞭。
這個鉤子可以看作beforeDestroy的替代,如果你緩存瞭組件,要在組件銷毀的的時候做一些事情,你可以放在這個鉤子裡。
註意:
1、 使用 keep-alive 會將數據保留在內存中,如果要在每次進入頁面的時候獲取最新的數據,需要在 activated 階段獲取數據,承擔原來created鉤子函數中獲取數據的任務。
2、隻有組件被 keep-alive 包裹時,這兩個生命周期函數才會被調用,如果作為正常組件使用,是不會被調用的,以及在 2.1.0 版本之後,使用 exclude 排除之後,就算被包裹在 keep-alive 中,這兩個鉤子函數依然不會被調用!
3、以上這兩個鉤子函數在服務器端渲染期間不被調用。
參考官方文檔:cn.vuejs.org/v2/api/#kee…
以上就是Vue 內置組件keep-alive的使用示例的詳細內容,更多關於Vue 內置組件keep-alive的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- None Found