共计 1561 个字符，预计需要花费 4 分钟才能阅读完成。
20190212 问
vue 中 keepalive 怎么理解？
说在前面: keep-alive 是 vue 源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/…
什么是 keepalive
我们平时开发中, 总有部分组件没有必要多次 init, 我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时，也不会进行重新 init
keepalive 音译过来就是保持活着, 所以在 vue 中我们可以使用 keepalive 来进行组件缓存
基本使用
// 被 keepalive 包含的组件会被进行缓存
<keep-alive>
<component />
</keep-alive>
上面提到被 keepalive 包含的组件不会被再次 init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue 为 keepalive 提供了两个额外的 hook
activated 当 keepalive 包含的组件再次渲染的时候触发
deactivated 当 keepalive 包含的组件销毁的时候触发
注: 2.1.0 版本后 keepalive 包含但被 exclude 排除的组件不会有以上两个 hook
参数
keepalive 可以接收 3 个属性做为参数进行匹配对应的组件进行缓存
include 包含的组件
exclude 排除的组件
max 缓存组件的最大值
其中 include,exclude 可以为字符，数组，以及正则表达式 max 类型为字符或者数字
代码理解
// 只缓存组件 name 为 a 或者 b 的组件
<keep-alive include=”a,b”>
<component :is=”currentView” />
</keep-alive>
// 组件名为 c 的组件不缓存
<keep-alive exclude=”c”>
<component :is=”currentView”/>
</keep-alive>
// 如果同时使用 include,exclude, 那么 exclude 优先于 include，下面的例子也就是只缓存 a 组件
<keep-alive include=”a,b” exclude=”b”>
<component :is=”currentView”/>
</keep-alive>
// 如果缓存的组件超过了 max 设定的值 5，那么将删除第一个缓存的组件
<keep-alive exclude=”c” max=”5″>
<component :is=”currentView”/>
</keep-alive>
配合 router 使用
<!– template –>
// 意思就是 $router.meta.keepAlive 值为真是将组件进行缓存
<keep-alive>
<router-view v-if=”$router.meta.keepAlive”></router-view>
</keep-alive>
<router-view v-if=”!$router.meta.keepAlive”></router-view>
//router 配置
new Router({
routes: [
{
name: ‘a’,
path: ‘/a’,
component: A,
meta: {
keepAlive: true
}
},
{
name: ‘b’,
path: ‘/b’,
component: B
}
]
})
总结
keepalive 是一个抽象组件，缓存 vnode，缓存的组件不会被 mounted，为此提供 activated 和 deactivated 钩子函数, 使用 props max 可以控制缓存组件个数
关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题