Vue3 keep-alive用法及说明
作者：qq_45438471
这篇文章主要介绍了Vue3 keep-alive用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue3中的keep-alive可以用于优化组件渲染的性能。例如，在一个页面中，有一些组件不需要每次访问时都重新渲染，可以使用keep-alive将这些组件缓存起来，只在第一次或数据变化时渲染更新。这样做可以减少组件的重复渲染，提高页面的响应速度。同时，keep-alive也可以用于处理一些需要缓存的数据，例如用户登录状态等。
本文主要介绍Vue3中keep-alive的使用。
属性详解
- include：缓存的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
- exclude：排除的组件(可以是字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
- max：缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
当组件名被include和exclude同时绑定时，exclude优先与include
缓存组件数大于max时，删除第一个被缓存的组件。
include和exclude传 数组 情况居多
官网范例：
<template>
<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
<keep-alive exclude="c">
<component :is="view"></component>
</keep-alive>
<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
<keep-alive include="a,b" exclude="b">
<component :is="view"></component>
</keep-alive>
<!-- 如果缓存的组件超过了max设定的值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>
动态组件要先注册再使用，且与keep-alive一起使用时先匹配view值对应组件名的组件再做缓存判断
基本用法
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>
实际开发中，我们可以结合路由守卫来实现需要缓存组件的缓存。
补充 App.vue：
<script setup>
import { beforeRouteLeave } from 'vue-router'
beforeRouteLeave(to, from, next) {
to.meta.keepAlive = true;
next();
}
}
</script>
注意
- 1、include和keepAlive只能使用一个，不能混合使用。
- 2、如果要缓存，最好在keep-alive外加个div标签。根标签不该是router-view，不然会白屏。
- 3、keep-alive不支持缓存孙子组件。若想缓存孙子组件，可以将整个子组件缓存，或者在子组件里再使用keepalive。
- 4、一定要给组件加上name。使用setup语法糖的可以<script setup>和<script>一起用，请看上述代码。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。