摘要：
在电子商务相关项目中，当我们第一次进入列表页面时，我们需要请求数据。当我从列表页面进入详细信息页面时，我们需要在不缓存详细信息页面的情况下请求数据，然后返回列表页面。此时，我们使用keep-alive缓存组件以防止二次渲染，这将大大节省性能。deactivated：当当前组件失去焦点时触发--缓存名称为test keep alive的组件--˃˂！
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：
- 一般结合路由和动态组件一起使用，用于缓存组件；
- 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
- 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。
1.通常用来包裹组件使用，本身没有意义，不会产生任何可视的元素，与component一起使用
<keep-alive> <component :is="view"></component> </keep-alive>
2.在包裹组件时可以默认缓存组件，所谓缓存组件是指组件会保持一个状态不变，而不会在切换时重新挂载渲染等
3.props: [include, exclude, max]
- include： 指定缓存的组件，其中指定的是组件的name
- exclude： 指定不缓存某个组件，其中指定的是组件的name
- max： 指定最多缓存多少组件，达到最大值的时候会把最开始缓存的替换掉
4.上面缓存可以结合路由来缓存页面
<keep-alive> <router-view></router-view> </keep-alive>
5.在keep-alive包裹下的组件可能会有两个钩子函数被触发
activated： 当前组件处于焦点状态时会触发当前钩子，被缓存的组件可以用此来替代mounted（组件不会重新挂载）。
deactivated： 当前组件失去焦点状态时触发。
实例：
<keep-alive include="test-keep-alive"> <!-- 将缓存name为test-keep-alive的组件 --> <component></component> </keep-alive> <keep-alive include="a,b"> <!-- 将缓存name为a或者b的组件，结合动态组件使用 --> <component :is="view"></component> </keep-alive> <!-- 使用正则表达式，需使用v-bind --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 动态判断 --> <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属性：
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
需要在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用法
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们<keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中- 当组件在
<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行