vue的<keep-alive>
- <keep-alive>是Vue的內置組件膀息，能在組件切換過程中將狀態(tài)保留在內存中巢掺，防止重復渲染DOM待榔。 把切換出去的組件保留在緩存中屁使，可以保留組件的狀態(tài)或者避免重新渲染减细。
- <keep-alive>包裹動態(tài)組件時匆瓜，會緩存不活動的組件實例，而不是銷毀它們未蝌。和 <transition> 相似驮吱，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在父組件鏈中萧吠。
prop:
- include: 字符串或正則表達式左冬。只有匹配的組件會被緩存。
- exclude: 字符串或正則表達式纸型。任何匹配的組件都不會被緩存拇砰。
<keep-alive include="test-keep-alive">
<!-- 將緩存name為test-keep-alive的組件 -->
<component></component>
</keep-alive>
<keep-alive include="a,b">
<!-- 將緩存name為a或者b的組件，結合動態(tài)組件使用 -->
<component :is="view"></component>
</keep-alive>
<!-- 使用正則表達式狰腌，需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 動態(tài)判斷 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- 將不緩存name為test-keep-alive的組件 -->
<component></component>
</keep-alive>
結合router除破，緩存部分頁面
使用$route.meta的keepAlive屬性：
需要在router中設置router的元信息meta
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要緩存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被緩存
}
}
]
})
使用
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
