Vue Router路由動(dòng)態(tài)緩存組件使用詳解
一、簡介
Vue Router 允許你緩存路由組件，這樣在用戶導(dǎo)航回之前的頁面時(shí)，組件的狀態(tài)會(huì)被保留而不是重新渲染。這可以通過使用 <keep-alive> 組件來實(shí)現(xiàn)。
<keep-alive> 是一個(gè)內(nèi)置抽象組件，它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。
它的主要作用是緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。
當(dāng)組件在 <keep-alive> 包裹下被切換時(shí)，它的狀態(tài)（包括數(shù)據(jù)、DOM 結(jié)構(gòu)等）都會(huì)被保留，以便在下次重新顯示時(shí)能夠恢復(fù)之前的狀態(tài)，而不是重新創(chuàng)建組件實(shí)例。
基本用法
<keep-alive> <component :is="currentTabComponent"></component> </keep-alive>
在上面的例子中，currentTabComponent 是一個(gè)動(dòng)態(tài)組件，它的值會(huì)根據(jù)當(dāng)前選中的標(biāo)簽頁而變化。
使用 <keep-alive> 后，當(dāng)切換標(biāo)簽頁時(shí)，之前的組件實(shí)例會(huì)被緩存起來，而不是被銷毀。
生命周期鉤子
被 <keep-alive> 包裹的組件擁有兩個(gè)特有的生命周期鉤子：activated 和 deactivated。
activated：當(dāng)組件被激活時(shí)調(diào)用，即在 keep-alive 緩存中組件再次可見時(shí)被調(diào)用。deactivated：當(dāng)組件被停用時(shí)調(diào)用，即在 keep-alive 緩存中組件不可見時(shí)被調(diào)用。
這兩個(gè)鉤子可以幫助你更好地管理組件的狀態(tài)，比如當(dāng)組件重新被激活時(shí)，你可能需要重新獲取數(shù)據(jù)或者更新視圖。
二、定義是否緩存組件
根據(jù)路由的 meta 字段中的 keepAlive 屬性來決定是否緩存組件。
如果 keepAlive 為 true，則組件會(huì)被緩存；否則，它會(huì)被緩存。
const routes = [
{
path: '/foo',
component: Foo,
meta: { keepAlive: true } // 這個(gè)組件會(huì)被緩存
},
{
path: '/bar',
component: Bar,
meta: { keepAlive: false } // 沒有設(shè)置 meta.keepAlive 或其值為 false，則組件不會(huì)被緩存
}
// ... 其他路由配置
];三、緩存組件
1. 通過 :include 屬性實(shí)現(xiàn)
可利用keep-alive的 include 或 exclude 屬性（include 和 exclude 包含的name 是組件的name不是router name）來設(shè)置緩存：
include值為字符串或者正則表達(dá)式匹配的組件name會(huì)被緩存。exclude值為字符串或正則表達(dá)式匹配的組件name不會(huì)被緩存。
vue2.x中
通過 <keep-alive> 的 :include 屬性來實(shí)現(xiàn)動(dòng)態(tài)緩存組件
<template>
<div id="app">
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
cachedViews: [] // 存儲需要緩存的組件名
};
},
watch: {
$route(to, from) {
// 過濾出需要緩存的組件，即 meta.keepAlive = true 的組件
const keepAliveComponent = to.matched.filter(record => {
return record.meta && record.meta.keepAlive;
});
if (keepAliveComponent.length) {
// 把需要緩存的組件的name放到cachedViews集合里
this.cachedViews = this.cachedViews.concat(keepAliveComponent.map(record => record.name));
} else {
const index = this.cachedViews.indexOf(to.name);
if (index > -1) {
this.cachedViews.splice(index, 1);
}
}
}
}
};
</script>vue3.x中
在 Vue 3 中同樣可以使用 <keep-alive> 的 :include 屬性來實(shí)現(xiàn)動(dòng)態(tài)緩存組件：
<template>
<div id="app">
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
import { ref, onMounted, watch, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
export default {
name: 'App',
setup() {
const cachedViews = ref([]);
const route = useRoute();
const updateCachedViews = () => {
const keepAliveComponent = route.matched.filter(record => {
return record.meta && record.meta.keepAlive;
});
cachedViews.value = keepAliveComponent.map(record => record.name);
};
onMounted(() => {
updateCachedViews();
});
watch(
route,
() => {
updateCachedViews();
},
{ immediate: false }
);
onUnmounted(() => {
// 清理操作，如果需要的話
});
return {
cachedViews
};
}
};
</script>2. 通過 v-slot 功能實(shí)現(xiàn)
由于Vue 3 由于引入了組合式 API 和 v-slot 功能，有更簡潔的方式來實(shí)現(xiàn)動(dòng)態(tài)緩存：
<template>
<div id="app">
<router-view v-slot="{ Component }">
<keep-alive v-if="$route.meta && $route.meta.keepAlive">
<component :is="Component" />
</keep-alive>
<component v-else :is="Component" />
</router-view>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App'
});
</script>使用<router-view> 的 v-slot 功能來訪問當(dāng)前路由組件的實(shí)例。
然后，我們檢查這個(gè)組件的 meta.keepAlive 屬性來決定是否將其包裹在 <keep-alive> 中。
3. 通過 v-if 來實(shí)現(xiàn)
在Vue2和Vue3中都可以使用 v-if="$route.meta.keepAlive" 來判斷哪些組件需要緩存，簡單粗暴
<template>
<div id="app">
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App'
});
</script>四、注意事項(xiàng)
- 雖然
<keep-alive>可以提高性能，但也要避免過度使用，因?yàn)榫彺娴慕M件實(shí)例會(huì)占用內(nèi)存。 - 當(dāng)組件被
<keep-alive>包裹時(shí)，它的created和mounted鉤子只會(huì)在第一次渲染時(shí)調(diào)用，之后的切換不會(huì)再次觸發(fā)這兩個(gè)鉤子。 - 如果需要強(qiáng)制刷新緩存的組件，可以通過改變 key 屬性或者使用 ·include/exclude· 屬性來動(dòng)態(tài)控制哪些組件需要被緩存。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?＜script?setup?lang=“ts“＞?的基本使用
<script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時(shí)語法糖，本文主要講解<script setup>?與?TypeScript?的基本使用，感興趣的朋友跟隨小編一起看看吧2022-12-12
vue實(shí)現(xiàn)歌手列表字母排序下拉滾動(dòng)條側(cè)欄排序?qū)崟r(shí)更新
這篇文章主要介紹了vue實(shí)現(xiàn)歌手列表字母排序，下拉滾動(dòng)條側(cè)欄排序?qū)崟r(shí)更新,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
element?ui?watch?el-input賦值之后無法刪除或修改問題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無法刪除或修改問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue實(shí)現(xiàn)小球滑動(dòng)交叉效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)小球滑動(dòng)交叉，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue-admin如何實(shí)現(xiàn)動(dòng)態(tài)路由
這篇文章主要介紹了vue-admin如何實(shí)現(xiàn)動(dòng)態(tài)路由問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js簡易安裝和快速入門的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue集成chartjs的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue調(diào)用原生方法交互，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
深入理解Vue.js3中Reactive的實(shí)現(xiàn)
reactive是Vue 3的Composition API中的一個(gè)函數(shù),它允許你創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對象,本文主要介紹了深入理解Vue.js3中Reactive的實(shí)現(xiàn),感興趣的可以了解一下2024-01-01
Vue項(xiàng)目,?在實(shí)際工作中,?有些時(shí)候需要在?加載完某些數(shù)據(jù)之后對當(dāng)前頁面進(jìn)行刷新,?這篇文章主要為大家介紹了三種常用方法,需要的可以參考一下2023-10-10