## 前言 本文主要介紹vue2中keep-alive的基本用法 。與官網介紹的角度，本文主要從使用場景切入會用到的api。 ## 基本用法 vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應的組件,減少性能消耗。 ~~~ <keep-alive> <component> <!-- 組件將被緩存 --> </component> </keep-alive> <!-- 多個條件判斷的子組件 --> <keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive> ~~~ 有時候 可能需要緩存整個站點的所有頁面,而頁面一般一進去都要觸發請求的 在使用keep-alive的情況下 `<keep-alive><router-view></router-view></keep-alive>` 備注 ：<keep-alive> 是用在其一個直屬的子組件被開關的情形。如果你在其中有 v-for 則不會工作。如果有上述的多個條件性的子元素，<keep-alive> 要求同時只有一個子元素被渲染。 ## 緩存部分頁面或者組件 ### 結合router.meta ~~~ // 這是目前用的比較多的方式 <keep-alive> <router-view v-if="!$route.meta.notKeepAlive"></router-view> </keep-alive> <router-view v-if="$route.meta.notKeepAlive"></router-view> ~~~ router設置 ~~~ routes: [ { path: '/', redirect: '/index', component: Index, mate: { keepAlive: true }}, { path: '/common', component: TestParent, children: [ { path: '/test2', component: Test2, mate: { keepAlive: true } } ] } // 表示index和test2都使用keep-alive ~~~ ## 官網文檔 - [內置組件--keep-alive](https://cn.vuejs.org/v2/api/#keep-alive)