Vue – 保持组件活动 keep-alive

简介

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue 内置的 <keep-alive> 组件保持动态组 件的状态。

使用方法

使用 <keep-alive></keep-alive> 包裹组件或元素，即可让组件保持活动状态，即使设置隐藏，该组件内的变化数据也不会发生清空情况。

<keep-alive>
    <component :is="comName"></component>
</keep-alive> 

keep-alive 生命周期函数

deactivated

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数

  deactivated() {
    console.log('组件被缓存了')
  },

activated

当组件被激活时，会自动触发组件的 activated 生命周期函数

  activated() {
    console.log('组件被激活了')
  },

include 属性

<keep-alive> 中默认包裹中的所有组件都会设置为缓存，但是有时我们只希望某个组件被缓存，不希望所有组件都缓存，可以使用 include 属性指定需要缓存的组件。

    <keep-alive include="Left">
      <component :is="Left"></component>
    </keep-alive>
当 Right 组件被切换时，Right 组件不会被缓存

exclude 属性

和 include 属性相反，使用 exclude 属性来指定那些组件 不使用缓存。

    <keep-alive exclude="Left">
      <component :is="Right"></component>
    </keep-alive>

 注意：include 和 exclude 只能二选一，不可同时使用。