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