keep-alive

keep-alive

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

开启keep-alive 生命周期的变化,涉及两个新的生命周期 onActived和onDeactived

初次进入时： onMounted—> onActivated
退出后触发 onDeactivated
再次进入：
只会触发 onActivated事件挂载的方法等，

所以我们通常将只执行一次的接口我们放在 onMounted中；组件每次进去执行的方法或者接口放在 onActivated中

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多个条件判断的子组件.默认都缓存-->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 缓存其中的A组件,不缓存B组件,include属性-->
<keep-alive :include="[A]">
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 不缓存其中的B组件,缓存A组件，exclude属性-->
<keep-alive :exclude="[B]">
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
 
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>