Vue keep-alive 缓存动态组件实例不销毁组件

作用

保持组件实例，不再销毁和重新创建，保留数据。

使用

直接使用<keep-alive>标签包裹动态组件即可。类似：<component/>、<router-view/>等。

使用vue-devtools可以看到隐藏的组件会显示inactive。

生命周期

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

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

注意：当组件第一次被创建时，既会执行created，又会执行activated生命周期函数。

include exclude

include：指定组件进行缓存。没有指定的其他组件都不会被保存。使用,逗号隔开，注意两个组件名之间不能有空格。

exclude：指定组件不进行缓存（每次都会销毁和创建）。

示例

<template>
  <div>

    <keep-alive include="FakeComA,FakeComB" exclude="FakeComC">
      <component :is="componentName"></component>
    </keep-alive>

    <button @click="componentName = 'FakeComA'">切换组件A</button>
    <button @click="componentName = 'FakeComB'">切换组件B</button>
  </div>
</template>

<script>
import FakeComA from "@/components/FakeComA";
import FakeComB from "@/components/FakeComB";

export default {
  name: "KeepAliveComponent",
  components: {FakeComB, FakeComA},
  data: () => {
    return {
      componentName: "FakeComA"
    }
  },
}
</script>

FakeComA示例代码，包含了activated和deactivated生命周期函数。

<template>
<div>
  <p>
    Fake component a
  </p>
</div>
</template>

<script>
export default {
  name: "FakeComA",
  created() {
    console.log("fake component a created")
  },
  destroyed() {
    console.log("fake component a destroyed")
  },
  activated() {
    console.log("fake component a activated")
  },
  deactivated() {
    console.log("fake component a deactivated")
  }
}
</script>