keep-alive 簡介

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

用法也很簡單：

<keep-alive> <component> <!-- 該組件將被緩存！ --> </component></keep-alive>

props

include - 字符串或正則表達，只有匹配的組件會被緩存
exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存

// 組件 aexport default { name: 'a', data () { return {} }}<keep-alive include="a"> <component> <!-- name 為 a 的組件將被緩存！ --> </component></keep-alive>可以保留它的狀態(tài)或避免重新渲染<keep-alive exclude="a"> <component> <!-- 除了 name 為 a 的組件都將被緩存！ --> </component></keep-alive>可以保留它的狀態(tài)或避免重新渲染<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>

遇見 vue-router

router-view 也是一個組件，如果直接被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會被緩存：

<keep-alive> <router-view> <!-- 所有路徑匹配到的視圖組件都會被緩存！ --> </router-view></keep-alive>

然而產品汪總是要改需求，攔都攔不住...

問題

如果只想 router-view 里面某個組件被緩存，怎么辦？

使用 include/exclude
增加 router.meta 屬性
使用 include/exclude

// 組件 aexport default { name: 'a', data () { return {} }}<keep-alive include="a"> <router-view> <!-- 只有路徑匹配到的視圖 a 組件會被緩存！ --> </router-view></keep-alive>

exclude 例子類似。

缺點：需要知道組件的 name，項目復雜的時候不是很好的選擇

增加 router.meta 屬性

// routes 配置export default [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true // 需要被緩存 } }, { path: '/:id', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被緩存 } }]<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 這里是會被緩存的視圖組件，比如 Home！ --> </router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"> <!-- 這里是不被緩存的視圖組件，比如 Edit！ --></router-view>