vue中緩存組件keep alive的介紹及使用方法

更新時(shí)間：2022年08月04日 09:30:18 作者：Celester_best

這篇文章主要介紹了vue緩存組件keepalive的相關(guān)資料,keep-alive組件是使用 include exclude這兩個(gè)屬性傳入組件名稱來(lái)確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

介紹

keep-alive是vue的內(nèi)置組件，可以用來(lái)緩存組件。當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，不會(huì)銷毀它們；將不活動(dòng)的組件的狀態(tài)保留在內(nèi)存中，可以防止重復(fù)渲染DOM，減少加載事件和性能消耗。

注意：keep-alive是一個(gè)抽象組件，自身不會(huì)渲染成一個(gè)DOM元素，也不會(huì)出現(xiàn)在父組件鏈中。

原理：

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

使用

緩存所有的組件

在APP.js中緩存所有組件

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

緩存某個(gè)組件

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

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

keep-alive的使用示例

先來(lái)看看不加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("==== 點(diǎn)擊切換按鈕");
      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時(shí)，切換按鈕會(huì)有組件的創(chuàng)建和銷毀

再來(lái)看下使用keep alive的情況。修改keepAliveDemo布局代碼

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

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

include和exclude屬性的使用

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

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

include的使用

只有匹配上的組件才會(huì)被緩存，沒(méi)匹配上的組件不會(huì)被緩存。

修改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的使用

匹配上的組件不會(huì)被被緩存，沒(méi)匹配上的組件會(huì)被緩存。

修改keepAliveDemo布局代碼如下

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