關注我的個人博客:https://pinbolei.cn，獲取更多內容
keep-alive適用于動態(tài)組件中仔涩，當在組件之間切換的時候饲常，你有時會想保持這些組件的狀態(tài)，以避免反復重渲染導致的性能問題黍翎。
keep-alive讓組件實例能夠被在它們第一次被創(chuàng)建的時候緩存下來。
注意這個 <keep-alive> 要求被切換到的組件都有自己的名字艳丛，不論是通過組件的 name 選項還是局部/全局注冊匣掸。
Props：
include - 字符串或正則表達式。只有名稱匹配的組件會被緩存氮双。
exclude - 字符串或正則表達式碰酝。任何名稱匹配的組件都不會被緩存。
max - 數(shù)字戴差。最多可以緩存多少組件實例送爸。
用法：
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例暖释，而不是銷毀它們袭厂。
<keep-alive>是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在父組件鏈中球匕。
當組件在 <keep-alive> 內被切換纹磺，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應執(zhí)行。
示例：
主要用于保留組件狀態(tài)或避免重新渲染。
<!-- 基本 -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
<!-- 多個條件判斷的子組件 -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
<!-- `<transition>` 一起使用 -->
<transition>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</transition>
include and exclude
include 和 exclude屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串片习、正則表達式或一個數(shù)組來表示：
<!-- 逗號分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正則表達式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 數(shù)組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
具體示例：
一個簡單的tab切換,可以嘗試把<keep-alive>去掉之后,對比一下,然后就會發(fā)現(xiàn)它的好處。
test.vue
<template>
<div class="test">
<div class="testNav">
<div :class="{'selected':tab === 1,'testTitle':true}" @click="toTab(1)">標題一</div>
<div :class="{'selected':tab === 2,'testTitle':true}" @click="toTab(2)">標題二</div>
</div>
<div class="container">
<keep-alive>
<Test1 v-if="tab === 1">
</Test1>
<Test2 v-else>
</Test2>
</keep-alive>
</div>
</div>
</template>
<script>
import Test1 from './test1.vue';
import Test2 from './test2.vue';
export default {
data() {
return {
tab: 1,
};
},
components: {
Test1,
Test2,
},
methods: {
toTab(index) {
this.tab = index;
},
},
}
</script>
<style lang="less">
.test {
width: 100%;
.testNav {
height: 60px;
line-height: 60px;
display: flex;
border-bottom: 1px solid #e5e5e5;
.testTitle {
flex: 1;
text-align: center;
}
.selected {
color: red;
}
}
}
</style>
test1.vue
<template>
<div class="test1">
test1
{{testInfo1}}
</div>
</template>
<script>
export default {
data() {
return {
testInfo1: '',
};
},
activated() {
console.log('測試1被激活');
},
deactivated() {
console.log('測試1被緩存');
},
created() {
setTimeout(() => {
this.testInfo1 = '這是測試一的數(shù)據(jù)';
}, 2000);
},
}
</script>
test2.vue
<template>
<div>
test2
{{testInfo2}}
</div>
</template>
<script>
export default {
data() {
return {
testInfo2: '',
}
},
activated() {
console.log('測試2被激活');
},
deactivated() {
console.log('測試2被緩存');
},
created() {
setTimeout(() => {
this.testInfo2 = '這是測試二的數(shù)據(jù)';
}, 2000);
},
}
</script>
運行代碼式矫，打開控制臺，你會更直觀的看到keep-alive的作用役耕，以及activated和deactivated這兩個函數(shù)被觸發(fā)的時間
用setTimeout模擬請求后端接口
1.剛打開頁面：
2.點擊標題二
3.再次點擊標題一衷佃，你會發(fā)現(xiàn)信息會快速顯示出來：
上述示例代碼原引用作者 funnycoderstar，鏈接https://juejin.im/post/5ad56d86518825556534ff4b
以上是添加了keep-alive的情況下蹄葱，如果去掉keep-alive氏义，每次切換tab你會發(fā)現(xiàn)都會重新請求一次數(shù)據(jù)锄列，感興趣的可以嘗試一下。
注：匹配首先檢查組件自身的 name 選項惯悠，如果 name 選項不可用邻邮，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配克婶。
max
最多可以緩存多少組件實例筒严。一旦這個數(shù)字達到了，在新實例被創(chuàng)建之前情萤，已緩存組件中最久沒有被訪問的實例會被銷毀掉鸭蛙。
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
