## 前言 本文主要介绍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)