vue中快取元件keep alive的介紹及使用方法

2022-08-04 14:00:27

介紹

keep-alive是vue的內建元件，可以用來快取元件。當它包裹動態元件時，會快取不活動的元件範例，不會銷燬它們；將不活動的元件的狀態保留在記憶體中，可以防止重複渲染DOM，減少載入事件和效能消耗。

注意：keep-alive是一個抽象元件，自身不會渲染成一個DOM元素，也不會出現在父元件鏈中。

原理：

在 created 函數呼叫時將需要快取的 VNode 節點儲存在 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 方法執行了");
  },
  created() {
    console.log(" KeepAlivePageB created 方法執行了");
  },
  beforeMount() {
    console.log(" KeepAlivePageB beforeMount 方法執行了");
  },
  mounted() {
    console.log(" KeepAlivePageB mounted 方法執行了");
  },
  beforeUpdate() {
    console.log(" KeepAlivePageB beforeUpdate 方法執行了");
  },
  updated() {
    console.log(" KeepAlivePageB updated 方法執行了");
  },
  beforeDestroy() {
    console.log(" KeepAlivePageB beforeDestroy 方法執行了");
  },
  destroyed() {
    console.log(" KeepAlivePageB destroyed 方法執行了");
  },
};
</script>

KeepAlivePageC的程式碼

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

不使用keep alive時，切換按鈕會有元件的建立和銷燬

再來看下使用keep alive的情況。修改keepAliveDemo佈局程式碼

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

發現開始會有元件的建立，但是沒有元件的銷燬，當兩個元件都建立了範例之後，再點選切換按鈕，元件既不建立也不銷燬，說明使用了快取的元件範例。

include和exclude屬性的使用

include：字串或者正規表示式。只有匹配的元件會被快取；

exclude：字串或者正規表示式。任何匹配的元件都不會被快取。

include的使用

只有匹配上的元件才會被快取，沒匹配上的元件不會被快取。

修改keepAliveDemo佈局程式碼如下

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

可以看到KeepAlivePageC只建立了一次，而KeepAlivePageB一直在建立和銷燬

exclude的使用

匹配上的元件不會被被快取，沒匹配上的元件會被快取。

修改keepAliveDemo佈局程式碼如下

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