深⼊理解与使⽤keep-alive（配合router-view缓存整个路
由页⾯）
在搭建 vue 项⽬时，有某些组件没必要多次渲染，所以需要将组件在内存中进⾏‘持久化'，此时<keep-alive>便可以派上⽤场了。<keep-alive>可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下⼀次显⽰时，也不会重现渲染。
PS：<keep-alive>与<transition>相似，只是⼀个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在⽗组件链中存在，⽐如：你永远在this.$parent中不到keep-alive。
1. keep-alive的基础使⽤
最基础的⼀般是结合动态组件去使⽤：
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
new Vue({
el: '#app',
data(){
return {
currentView: Test //Test为引⼊的⼦组件
}
}
})
不过此种⽅式并⽆太⼤的实⽤意义。
2. ⽣命周期钩⼦
被包含在<keep-alive>中创建的组件，会多出两个⽣命周期的钩⼦: activated与deactivated
activated
在组件被激活时调⽤，在组件第⼀次渲染时也会被调⽤，之后每次keep-alive激活时被调⽤。
deactivated
在组件被停⽤时调⽤。
注意：只有组件被keep-alive包裹时，这两个⽣命周期才会被调⽤，如果作为正常组件使⽤，是不会被调⽤，以及在2.1.0版本之后，使⽤exclude排除之后，就算被包裹在keep-alive中，这两个钩⼦依然不会被调⽤！另外在服务端渲染时此钩⼦也不会被调⽤的。
3. 配合router-view使⽤
有些时候可能需要将整个路由页⾯⼀切缓存下来，也就是将<router-view>进⾏缓存。这种使⽤场景还是蛮多的。
在vue 2.1.0之前，⼤部分是这样实现的：
<!-- template -->
<keep-alive>
<router-view v-if="$a.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive"></router-view>
//router配置
new Router({
routes: [
{
name: 'a',
path: '/a',
component: A,
meta: {
keepAlive: true
}
},
{
name: 'b',
path: '/b',
component: B
}
]
})
这样配置路由的路由元信息之后，a路由的$a.keepAlive便为true，⽽b路由则为false。
所以为true的将被包裹在keep-alive中，为false的则在外层。这样a路由便达到了被缓存的效果，如果还有想要缓存的路由，只需要在路由元中加⼊keepAlive: true即可。
4. 在2.1.0版本之后
在vue 2.1.0版本之后，keep-alive新加⼊了两个属性: include(包含的组件缓存⽣效) 与exclude(排除的组件不缓存，优先级⼤于include) 。
include和exclude属性允许组件有条件地缓存。⼆者都可以⽤逗号分隔字符串、正则表达式或⼀个数组来表⽰。
当使⽤正则或者是数组时，⼀定要使⽤v-bind !
<!-- 逗号分隔字符串，只有组件a与b被缓存。这样使⽤场景变得更有意义了 -->
react router缓存
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (需要使⽤ v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- Array (需要使⽤ v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
有了include之后，再与router-view⼀起使⽤时便⽅便许多了:
<!-- ⼀个include解决了，不需要多写⼀个标签，也不需要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
<router-view></router-view>
</keeo-alive>
5. 需要注意的地⽅
<keep-alive>先匹配被包含组件的name字段，如果name不可⽤，则匹配当前组件componetns配置中的注册名称。
<keep-alive>不会在函数式组件中正常⼯作，因为它们没有缓存实例。
当匹配条件同时在include与exclude存在时，以exclude优先级最⾼(当前vue 2.4.2 version)。⽐如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
包含在<keep-alive>中，但符合exclude，不会调⽤activated和deactivated。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。