20190212问vue中keepalive怎么理解？说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/…什么是keepalive我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时， 也不会进行重新initkeepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存基本使用// 被keepalive包含的组件会被进行缓存<keep-alive> <component /></keep-alive>上面提到被keepalive包含的组件不会被再次init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hookactivated 当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点推送当天的参考答案注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路点击加入答题