vue中keepalive怎么理解？​

什么是keepalive

我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时， 也不会进行重新init

keepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存

基本使用

上面提到被keepalive包含的组件不会被再次init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hook

• activated 当keepalive包含的组件再次渲染的时候触发
• deactivated 当keepalive包含的组件销毁的时候触发
  注: 2.1.0 版本后keepalive包含但被exclude排除的组件不会有以上两个hook

参数

keepalive可以接收3个属性做为参数进行匹配对应的组件进行缓存

• include 包含的组件
• exclude 排除的组件
• max 缓存组件的最大值
  其中include,exclude可以为字符，数组，以及正则表达式
  max 类型为字符或者数字

代码理解

配合router使用

总结

keepalive是一个抽象组件，缓存vnode，缓存的组件不会被mounted，为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数