说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js
什么是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 可以掌握缓存组件个数
