Vue3中keep-alive的使用及注意事項(xiàng)說明
更新時(shí)間：2025年04月17日 10:55:06 作者：大樊子
這篇文章主要介紹了Vue3中keep-alive的使用及注意事項(xiàng)說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue3中keep-alive使用及注意事項(xiàng)
keep-alive 是 Vue 內(nèi)置的一個(gè)抽象組件，用于緩存不活動(dòng)的組件實(shí)例，避免重復(fù)渲染，提高性能。
以下是它的詳細(xì)用法和注意事項(xiàng)：
基本用法
<template>
<!-- 基本用法 -->
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
<!-- 緩存特定組件 -->
<keep-alive include="CompA,CompB" exclude="CompC">
<router-view></router-view>
</keep-alive>
</template>主要功能
- 組件緩存：當(dāng)組件切換時(shí)，保留組件狀態(tài)（如數(shù)據(jù)、滾動(dòng)位置等）
- 避免重復(fù)渲染：減少不必要的 DOM 操作和生命周期鉤子執(zhí)行
- 保留狀態(tài)：保持表單輸入內(nèi)容、滾動(dòng)位置等
核心屬性
生命周期鉤子
被 keep-alive 緩存的組件會(huì)觸發(fā)特有的生命周期鉤子：
onActivated：組件被激活時(shí)調(diào)用（進(jìn)入緩存組件）onDeactivated：組件被停用時(shí)調(diào)用（離開緩存組件）
import { onActivated, onDeactivated } from 'vue'
export default {
setup() {
onActivated(() => {
console.log('組件被激活')
})
onDeactivated(() => {
console.log('組件被停用')
})
}
}與 Vue Router 結(jié)合使用
<template>
<keep-alive :include="cachedViews">
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>
</keep-alive>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const cachedViews = ref(['Home', 'User'])
return { cachedViews }
}
}
</script>注意事項(xiàng)
組件必須有 name 選項(xiàng)：include 和 exclude 匹配的是組件的 name 選項(xiàng)
動(dòng)態(tài)組件切換問題：
- 使用
key屬性強(qiáng)制重新渲染：
<keep-alive><comp :key="id"></comp></keep-alive>
- 或者使用
v-if控制：
<comp v-if="show"></comp>
內(nèi)存占用：
- 緩存過多組件可能導(dǎo)致內(nèi)存占用過高
- 使用
max屬性限制緩存數(shù)量
數(shù)據(jù)更新時(shí)機(jī)：
- 緩存的組件不會(huì)重新創(chuàng)建，因此
created/mounted不會(huì)再次觸發(fā) - 應(yīng)在
activated中處理數(shù)據(jù)刷新邏輯
滾動(dòng)行為：
- 默認(rèn)會(huì)保持滾動(dòng)位置
- 如需重置滾動(dòng)位置，可在
activated中處理：
onActivated(() => {
window.scrollTo(0, 0)
})與 Transition 一起使用：
<router-view v-slot="{ Component }">
<transition name="fade">
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>最佳實(shí)踐
- 只緩存必要的組件（如表單頁、列表頁）
- 對(duì)需要頻繁切換但狀態(tài)需要保留的組件使用
- 避免緩存大型組件或包含大量數(shù)據(jù)的組件
- 在路由元信息中管理緩存：
const routes = [
{
path: '/user',
component: User,
meta: { keepAlive: true }
}
]通過合理使用 keep-alive，可以顯著提升應(yīng)用性能，特別是在移動(dòng)端或需要頻繁切換視圖的場(chǎng)景中。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法
這篇文章主要介紹了一文搞懂Vue3中的異步組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
vue實(shí)現(xiàn)移動(dòng)端可拖拽式icon圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端可拖拽式icon圖標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Pinia是Vue的存儲(chǔ)庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問題匯總(推薦)
dhtmlxGantt一個(gè)功能豐富的甘特圖插件，支持任務(wù)編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問題匯總,需要的朋友可以參考下2023-03-03
Vue設(shè)計(jì)器form-create-designer配置表單默認(rèn)值示例詳解
這篇文章主要介紹了如何使用開源項(xiàng)目form-create-designer來靈活調(diào)整表單的默認(rèn)值,通過config.formOptions,您可以自定義表單的全局布局,文章提供了一個(gè)詳細(xì)的例子,展示了如何使用form-create-designer的配置選項(xiàng)來調(diào)整表單的布局和外觀,感興趣的朋友一起看看吧2024-11-11
vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁遇到這樣的需求,下面通過本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，本文講給大家詳細(xì)分析Vue路由Hash模式，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以借鑒一下2023-06-06
詳解vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地文件
這篇文章主要為大家詳細(xì)介紹了vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地的word、excle、pdf文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
這篇文章主要介紹了vue-cli3添加模式配置多環(huán)境變量的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了Vue-Router模式和鉤子的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02