keep-alive的实现

281 阅读1分钟

作用:实现组件缓存

keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。

钩子函数:

    `activated `组件渲染后调用
    `deactivated `组件销毁后调用
<keep-alive include='include_components' exclude='exclude_components'>

  <component>
     *<!-- 该组件是否缓存取决于include和exclude属性 -->*
  </component>
  
</keep-alive>

参数解释
include - 字符串或正则表达式,只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用v-bind


*<!-- 逗号分隔字符串,只有组件a与b被缓存。 -->*
<keep-alive include="a,b">
  <component></component>
</keep-alive>

*<!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -->*
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

*<!-- Array (需要使用 v-bind,被包含的都会被缓存) -->*
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

原理:Vue.js内部将DOM节点抽象成了一个个的VNode节点,keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件(pruneCache与pruneCache)的组件在cache对象中缓存起来,在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。