快捷導(dǎo)航

Vue3 keep-alive用法及說明

更新時間：2026年03月27日 08:55:07 作者：qq_45438471

這篇文章主要介紹了Vue3 keep-alive用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue3中的keep-alive可以用于優(yōu)化組件渲染的性能。例如，在一個頁面中，有一些組件不需要每次訪問時都重新渲染，可以使用keep-alive將這些組件緩存起來，只在第一次或數(shù)據(jù)變化時渲染更新。這樣做可以減少組件的重復(fù)渲染，提高頁面的響應(yīng)速度。同時，keep-alive也可以用于處理一些需要緩存的數(shù)據(jù)，例如用戶登錄狀態(tài)等。

本文主要介紹Vue3中keep-alive的使用。

屬性詳解

include：緩存的組件(可以為字符串，數(shù)組，以及正則表達式,只有匹配的組件會被緩存)
exclude：排除的組件(可以是字符串，數(shù)組，以及正則表達式,任何匹配的組件都不會被緩存)
max：緩存組件的最大值(類型為字符或者數(shù)字,可以控制緩存組件的個數(shù))

當組件名被include和exclude同時綁定時，exclude優(yōu)先與include

緩存組件數(shù)大于max時，刪除第一個被緩存的組件。

include和exclude傳 數(shù)組 情況居多

官網(wǎng)范例：

<template>
	<!-- 將（只）緩存組件name為a或者b的組件, 結(jié)合動態(tài)組件使用 -->
	<keep-alive include="a,b">
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 組件name為c的組件不緩存(可以保留它的狀態(tài)或避免重新渲染) -->
	<keep-alive exclude="c"> 
	  	<component :is="view"></component>
	</keep-alive>
	
	<!-- 使用正則表達式，需使用v-bind -->
	<keep-alive :include="/a|b/">
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 動態(tài)判斷 -->
	<keep-alive :include="includedComponents">
		<router-view></router-view>
	</keep-alive>
	
	<!-- 如果同時使用include,exclude,那么exclude優(yōu)先于include， 下面的例子只緩存a組件 -->
	<keep-alive include="a,b" exclude="b"> 
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 如果緩存的組件超過了max設(shè)定的值5，那么將刪除第一個被緩存的組件 -->
	<keep-alive exclude="c" max="5"> 
	  <component></component>
	</keep-alive>
</template>

<script>
	import { ref,computed } from 'vue'
	import A from './A.vue'
	import B from './B.vue'
	import C from './C.vue'

	const view = ref('A')
	const includedComponents = computed(() => {
		return view.value
	})
</script>

動態(tài)組件要先注冊再使用，且與keep-alive一起使用時先匹配view值對應(yīng)組件名的組件再做緩存判斷

基本用法

1、組件配置使用

示例代碼：

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive exclude='Home'>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
	export default {
		name: 'App'
	}
</script>

<script setup>
	import { useRouter } from 'vue-router'
	
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
</script>

2、路由配置使用

示例代碼：
在路由表中的meta屬性中添加自定義信息keepAlive，true為緩存，反之不緩存。

const routes = [
	{
	  path: '/home',
	  name: 'Home',
	  meta: {
	  	keepAlive: true
	  },
	  component: () => import('../views/Home.vue')
	},
	{ 
	  path: '/About',
	  name: 'About',
	  meta: {
	  	keepAlive: true
	  },
	  component: () => import('../views/About.vue')
	}
]

App.vue

<template>
	<div id="nav">
		<button @click='jumpHome'>home</button>
	    <button @click='jumpAbout'>about</button>
	</div>
  	<keep-alive>
    	<router-view v-if="route.meta.keepAlive"></router-view>
	</keep-alive>
	<router-view v-if="!route.meta.keepAlive"></router-view>
</template>

<script>
	export default {
		name: 'App'
	}
</script>

<script setup>
	import { useRouter,useRoute } from 'vue-router'
	
	const route = useRoute()
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
</script>

實際開發(fā)中，我們可以結(jié)合路由守衛(wèi)來實現(xiàn)需要緩存組件的緩存。

補充 App.vue：

<script setup>
	import { beforeRouteLeave } from 'vue-router'
	
	beforeRouteLeave(to, from, next) {
	    to.meta.keepAlive = true;
	    next();
 		}
	}
</script>