keep-alive是什么？

  • keep-alive是Vue.js的一个内置组件。
  • 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
  • 它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
  • 当组件在 内被切换，它的activated和 deactivated这两个生命周期钩子函数将会被对应执行。
  • 它提供了include与exclude两个属性，允许组件有条件地进行缓存。

    原理

    其实就是在created时将需要缓存的VNode节点保存在this.cache中／在render时,如果VNode的name符合在缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。

    用法

    1. <!-- 基本 -->
    2. <keep-alive>
    3. <component :is="view"></component>
    4. </keep-alive>
    5. //这里的component组件会被缓存起来。
    6. <!-- 多个条件判断的子组件 -->
    7. <keep-alive>
    8. <comp-a v-if="a > 1"></comp-a>
    9. <comp-b v-else></comp-b>
    10. </keep-alive>
    11. <!-- 和 `<transition>` 一起使用 -->
    12. <transition>
    13. <keep-alive>
    14.  <component :is="view"></component>
    15. </keep-alive>
    16. </transition>
    注意: 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素， 要求同时只有一个子元素被渲染。