目次
導入
keep-alive は、コンポーネントをキャッシュするために使用できる Vue の組み込みコンポーネントです。動的コンポーネントをラップする場合、非アクティブなコンポーネントのインスタンスをキャッシュし、それらを破棄しません。非アクティブなコンポーネントの状態をメモリ内に保持することで、DOM の繰り返しレンダリングを防ぎ、読み込みイベントとパフォーマンスの消費を削減できます。
注: keep-alive は抽象コンポーネントであり、それ自体は DOM 要素にレンダリングされず、親コンポーネント チェーンにも表示されません。
原理：
create 関数が呼び出されると、キャッシュする必要のある VNode ノードが this.cache/ に保存されます。 レンダリング(ページ レンダリング) の際、VNode の名前がキャッシュ条件を満たしている場合 (include と exclude で制御可能)、以前にキャッシュされた VNode インスタンスがレンダリングされます。
使用
すべてのコンポーネントをキャッシュする
すべてのコンポーネントを APP.vue にキャッシュする
<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>キープアライブの使用例
まずは生かさずに様子を見てみましょう。
コード：
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>
キープアライブを使用しない場合、切り替えボタンのコンポーネントは作成および破棄されます。
キープアライブの使い方を見てみましょう。keepAliveDemo レイアウト コードを変更する
<template>
<div>
<button @click="changeComp">切换</button>
<keep-alive>
<component :is="showComp" />
</keep-alive>
</div>
</template> 
最初にコンポーネントが作成されましたが、コンポーネントは破棄されていないことがわかりました。両方のコンポーネントがインスタンスを作成してから切り替えボタンをクリックした後、コンポーネントは作成も破棄もされず、キャッシュされたコンポーネント インスタンスが使用されたことがわかります。
include 属性と exclude 属性の使用
含まれるもの: 文字列または正規表現。一致するコンポーネントのみがキャッシュされます。
除外: 文字列または正規表現。一致するコンポーネントはキャッシュされません。
インクルードの使用
一致するコンポーネントのみがキャッシュされ、一致しないコンポーネントはキャッシュされません。
keepAliveDemo レイアウト コードを次のように変更します。
<template>
<div>
<button @click="changeComp">切换</button>
<keep-alive include="KeepAlivePageC">
<component :is="showComp" />
</keep-alive>
</div>
</template>
KeepAlivePageC は 1 回だけ作成されるのに対し、KeepAlivePageB は常に作成および破棄されていることがわかります。
除外の使用
一致するコンポーネントはキャッシュされませんが、一致しないコンポーネントはキャッシュされます。
keepAliveDemo レイアウト コードを次のように変更します。
<template>
<div>
<button @click="changeComp">切换</button>
<keep-alive exclude="KeepAlivePageC">
<component :is="showComp" />
</keep-alive>
</div>
</template>
KeepAlivePageB は 1 回だけ作成されるのに対し、KeepAlivePageC は常に作成および破棄されていることがわかります。
ライフサイクル
キープアライブに関連するライフフックがアクティブ化および非アクティブ化されます。
アクティブ化: キープアライブによってキャッシュされたコンポーネントがアクティブ化されたときに呼び出されます。
deactivated: キープアライブによってキャッシュされたコンポーネントが非アクティブ化されたときに呼び出されます。
上記の除外例を引き続き使用して、アクティブ化されたフックと非アクティブ化されたフックを KeepAlivePageB と KeepAlivePageC に追加します。
KeepAlivePageB アクティビティがアクティブ化されるとアクティブ化されたフックが実行され、非アクティブ化されると非アクティブ化されたフックが呼び出されることがわかります。