keep-alive 是Vue內(nèi)置的組件之一， 主要用于保留組件狀態(tài)或避免重新渲染。
作用
在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM，減少加載時(shí)間及性能消耗，提高用戶體驗(yàn)。
一、keep-alive 用法
< keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。
和 < transition> 相似，< keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在組件的父組件鏈中。
當(dāng)組件在 < keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。
Props：
include - 字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存。
exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存。
max - 數(shù)字。最多可以緩存多少組件實(shí)例。
- include & exclude
如果你只想緩存部分組件的狀態(tài)，可以使用include屬性。
如果你想除掉一些組件，其他的才被緩存，可以使用exlucde屬性。
- max
最多可以緩存多少組件實(shí)例。一旦這個(gè)數(shù)字達(dá)到了，在新實(shí)例被創(chuàng)建之前，已緩存組件中最久沒(méi)有被訪問(wèn)的實(shí)例會(huì)被銷毀掉。
|
1
2
3
|
<keep-alive :max="10"> <component :is="view"></component></keep-alive> |
使用示例：
1.緩存所有頁(yè)面：
|
1
2
3
4
|
<keep-alive> <router-view></router-view> <!--這里是會(huì)被緩存的組件--></keep-alive> |
2.根據(jù)條件緩存部分頁(yè)面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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> |
注意：
還有一步，你必須在需要被緩存狀態(tài)的組件的script部分，給組件添加一個(gè)name屬性。 如果沒(méi)有使用keep-alive緩存狀態(tài)的組件，可以不寫name屬性。但是如果使用了keep-alive緩存該組件狀態(tài)，則此組件必須有這個(gè)屬性。并且，這個(gè)屬性的值，還必須跟標(biāo)簽中include屬性的值完全一致，包括大小寫。 以productList.vue組件為例
|
1
2
3
4
5
6
7
8
9
10
|
<template> <!-- 這里是productList組件的html結(jié)構(gòu)部分 --></template><script>export default { name: "productList", //如果使用了keep-alive緩存該組件狀態(tài)，則此組件必須有這個(gè)屬性。 data(){ return {} }</script> |
3.結(jié)合vue-router，緩存部分頁(yè)面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
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 里面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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 中創(chuàng)建的組件，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated。
1. activated
在 keep-alive 組件激活時(shí)調(diào)用。
在組件第一次渲染時(shí)會(huì)被調(diào)用，之后在每次緩存組件被激活時(shí)調(diào)用。
第一次進(jìn)入緩存路由/組件，在mounted后面，beforeRouteEnter守衛(wèi)傳給 next 的回調(diào)函數(shù)之前調(diào)用：
頁(yè)面第一次進(jìn)入的時(shí)候，鉤子觸發(fā)的順序是created->mounted->activated
因?yàn)榻M件被緩存了，再次進(jìn)入緩存路由/組件時(shí)，不會(huì)觸發(fā)這些鉤子：
beforeCreate created beforeMount mounted 都不會(huì)觸發(fā)。
2. deactivated
在 keep-alive 組件停用(離開(kāi)路由)時(shí)調(diào)用。
使用了keep-alive就不會(huì)調(diào)用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)，因?yàn)榻M件沒(méi)被銷毀，被緩存起來(lái)了。
這個(gè)鉤子可以看作beforeDestroy的替代，如果你緩存了組件，要在組件銷毀的的時(shí)候做一些事情，你可以放在這個(gè)鉤子里。
注意：
1、 使用 keep-alive 會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁(yè)面的時(shí)候獲取最新的數(shù)據(jù)，需要在 activated 階段獲取數(shù)據(jù)，承擔(dān)原來(lái)created鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)。
2、只有組件被 keep-alive 包裹時(shí)，這兩個(gè)生命周期函數(shù)才會(huì)被調(diào)用，如果作為正常組件使用，是不會(huì)被調(diào)用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個(gè)鉤子函數(shù)依然不會(huì)被調(diào)用！
3、以上這兩個(gè)鉤子函數(shù)在服務(wù)器端渲染期間不被調(diào)用。
參考官方文檔：cn.vuejs.org/v2/api/#kee…
以上就是Vue 內(nèi)置組件keep-alive的使用示例的詳細(xì)內(nèi)容，更多關(guān)于Vue 內(nèi)置組件keep-alive的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6949439281936990244
