vue3 内置组件KeepAlive的使用

<KeepAlive> 是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。

基本使用

keepAlive 通常用于包裹动态组件,以实现缓存功能。其基本语法如下:

复制代码
// 父组件CompKeepAlive.vue 
<script setup>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'

const current = shallowRef(CompA)
</script>

<template>
  <div class="demo">
    <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current" :value="CompB" /> B</label>
    <KeepAlive>
      <component :is="current"></component>
    </KeepAlive>
  </div>
</template>

// 子组件 CompA.vue
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <p>Current component: A</p>
  <span>count: {{ count }}</span>
  <button @click="count++">+</button>
</template>

// 子组件 CompB.vue
<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

<template>
  <p>Current component: B</p>
  <span>Message is: {{ msg }}</span>
  <input v-model="msg">
</template>

包裹了动态组件 。当 current 的值切换时,被缓存的组件不会被销毁,而是被保留在内存中,以便下次切换时快速渲染

包含/排除

keepAlive 提供了 include 和 exclude 属性,用于控制哪些组件需要被缓存,哪些组件需要被排除。

  • include:指定需要被缓存的组件名称。可以是一个字符串或正则表达式。

  • exclude:指定不需要被缓存的组件名称。可以是一个字符串或正则表达式

    <KeepAlive include="a,b"> <component :is="current" /> </KeepAlive> <KeepAlive :include="/a|b/"> <component :is="current" /> </KeepAlive> <KeepAlive :include="['a', 'b']"> <component :is="current" /> </KeepAlive>

exclude组件

复制代码
<keep-alive :exclude="['CompB']">
  <component :is="current"></component>
</keep-alive>
最大缓存实例数

keepAlive 提供了一个 max 属性,用于限制缓存实例的最大数量。当缓存实例数量超过 max 时,最早缓存的实例会被移除

复制代码
<KeepAlive :max="1">
  <component :is="current" />
</KeepAlive>
 // CompA.vue 会被缓存
缓存实例的生命周期

对于缓存的组件来说,再次进入时,我们是不会执行created或者mounted等生命周期函数的:

  • 但是有时候我们确实希望监听到何时重新进入到了组件,何时离开了组件;

  • 这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听;

    <script setup> import { ref ,onActivated,onDeactivated } from 'vue' onActivated(()=>{ console.log('onActivated-- compA')

    })
    onDeactivated(()=>{
    console.log('onDeactivated --compA')
    })
    const count = ref(0)
    </script>

    <template>

    Current component: A

    count: {{ count }} <button @click="count++">+</button> </template>

请注意:

  • onActivated 在组件挂载时也会调用,并且 onDeactivated 在组件卸载时也会调用。

  • 这两个钩子不仅适用于 缓存的根组件,也适用于缓存树中的后代组件。

路由组件缓存​​:需配合 vue-router 的 使用
复制代码
<template>
<keep-alive :include="cachedComponents" :max="3">
  <router-view></router-view>
</keep-alive>
</template>

<script>
export default {
data() {
  return {
    cachedComponents: ['Home', 'Profile'] // 需要缓存的组件名
  };
}
};
</script>
相关推荐
开开心心就好12 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享13 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js