在 created 函數(shù)調(diào)用時將需要緩存的 VNode 節(jié)點保存在 this.cache 中／在render（頁面渲染）時，如果 VNode 的 name 符合緩存條件（可以用 include 以及 exclude 控制），則會從 this.cache 中取出之前緩存的 VNode 實例進行渲染。

使用

緩存所有的組件

在APP.js中緩存所有組件

<template>
  <div id="app">
    <keep-alive>
      <NativeBtn>
      <router-view />
    </keep-alive>
  </div>
</template>

緩存某個組件

緩存某個組件就直接在該組件的外層嵌套一層<keep-alive>

<template>
  <div id="app">
    <!-- 只緩存NativeBtn組件 -->
    <keep-alive>
      <NativeBtn />
    </keep-alive>
    <router-view />
  </div>
</template>

keep-alive的使用示例

先來看看不加keep alive的情況

代碼：

keepAliveDemo的代碼

<template>
  <div>
    <button @click="changeComp">切換</button>
    <component :is="showComp" />
  </div>
</template>
<script>
import KeepAlivePageC from "./KeepAlivePageC.vue";
import KeepAlivePageB from "./KeepAlivePageB.vue";
export default {
  name: "keepAliveDemo",
  components: { KeepAlivePageC, KeepAlivePageB },
  data() {
    return {
      compType: "1",
    };
  },
  computed: {
    showComp() {
      if (this.compType === "1") {
        return KeepAlivePageC;
      } else {
        return KeepAlivePageB;
      }
    },
  },
  methods: {
    changeComp() {
      console.log("==== 點擊切換按鈕");
      this.compType = this.compType === "1" ? "2" : "1";
    },
  },
};
</script>

KeepAlivePageB的代碼

<template>
  <div>KeepAlivePageB</div>
</template>
<script>
export default {
  name: "KeepAlivePageB",
  beforeCreate() {
    console.log(" KeepAlivePageB beforeCreate 方法執(zhí)行了");
  },
  created() {
    console.log(" KeepAlivePageB created 方法執(zhí)行了");
  },
  beforeMount() {
    console.log(" KeepAlivePageB beforeMount 方法執(zhí)行了");
  },
  mounted() {
    console.log(" KeepAlivePageB mounted 方法執(zhí)行了");
  },
  beforeUpdate() {
    console.log(" KeepAlivePageB beforeUpdate 方法執(zhí)行了");
  },
  updated() {
    console.log(" KeepAlivePageB updated 方法執(zhí)行了");
  },
  beforeDestroy() {
    console.log(" KeepAlivePageB beforeDestroy 方法執(zhí)行了");
  },
  destroyed() {
    console.log(" KeepAlivePageB destroyed 方法執(zhí)行了");
  },
};
</script>

KeepAlivePageC的代碼

<template>
  <div>KeepAlivePageC</div>
</template>
<script>
export default {
  name: "KeepAlivePageC",
  beforeCreate() {
    console.log(" KeepAlivePageC beforeCreate 方法執(zhí)行了");
  },
  created() {
    console.log(" KeepAlivePageC created 方法執(zhí)行了");
  },
  beforeMount() {
    console.log(" KeepAlivePageC beforeMount 方法執(zhí)行了");
  },
  mounted() {
    console.log(" KeepAlivePageC mounted 方法執(zhí)行了");
  },
  beforeUpdate() {
    console.log(" KeepAlivePageC beforeUpdate 方法執(zhí)行了");
  },
  updated() {
    console.log(" KeepAlivePageC updated 方法執(zhí)行了");
  },
  beforeDestroy() {
    console.log(" KeepAlivePageC beforeDestroy 方法執(zhí)行了");
  },
  destroyed() {
    console.log(" KeepAlivePageC destroyed 方法執(zhí)行了");
  },
};
</script>

不使用keep alive時，切換按鈕會有組件的創(chuàng)建和銷毀

再來看下使用keep alive的情況。修改keepAliveDemo布局代碼

<template>
  <div>
    <button @click="changeComp">切換</button>
    <keep-alive>
      <component :is="showComp" />
    </keep-alive>
  </div>
</template>

發(fā)現(xiàn)開始會有組件的創(chuàng)建，但是沒有組件的銷毀，當(dāng)兩個組件都創(chuàng)建了實例之后，再點擊切換按鈕，組件既不創(chuàng)建也不銷毀，說明使用了緩存的組件實例。

include和exclude屬性的使用

include：字符串或者正則表達式。只有匹配的組件會被緩存；

exclude：字符串或者正則表達式。任何匹配的組件都不會被緩存。

include的使用

只有匹配上的組件才會被緩存，沒匹配上的組件不會被緩存。

修改keepAliveDemo布局代碼如下

<template>
  <div>
    <button @click="changeComp">切換</button>
    <keep-alive include="KeepAlivePageC">
      <component :is="showComp" />
    </keep-alive>
  </div>
</template>

可以看到KeepAlivePageC只創(chuàng)建了一次，而KeepAlivePageB一直在創(chuàng)建和銷毀

exclude的使用

匹配上的組件不會被被緩存，沒匹配上的組件會被緩存。

修改keepAliveDemo布局代碼如下

<template>
  <div>
    <button @click="changeComp">切換</button>
    <keep-alive exclude="KeepAlivePageC">
      <component :is="showComp" />
    </keep-alive>
  </div>
</template>