【前端】Vue3 中实现两个组件的动态切换保活

news2025/5/31 16:52:21

在 Vue3 中实现两个组件的动态切换保活，核心是通过 <component> 动态组件与 <KeepAlive> 缓存组件的组合使用。以下是具体实现方案和进阶技巧：

一、基础实现方案

1. 动态组件 + KeepAlive 保活

使用 <component :is> 实现动态切换，并用 <KeepAlive> 包裹以实现状态缓存：

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <KeepAlive>
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'

const components = { CompA, CompB }
const currentComponent = shallowRef(CompA) // 使用 shallowRef 避免深度响应式

const toggleComponent = () => {
  currentComponent.value = 
    currentComponent.value === CompA ? CompB : CompA
}
</script>

关键点：

shallowRef 替代 ref：避免对组件对象进行深度响应式转换，减少性能开销
KeepAlive 包裹：缓存组件实例，保留表单输入、滚动位置等状态

二、高级配置技巧

1. 精准控制缓存范围

通过 include/exclude 指定需缓存的组件名：

<KeepAlive include="CompA,CompB" max="2">
  <component :is="currentComponent" />
</KeepAlive>

参数说明：

include：字符串/正则/数组，匹配组件 name 属性
max：最大缓存数（超过时按 LRU 算法淘汰旧实例）

2. 生命周期管理

利用专属钩子处理缓存状态：

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  console.log('组件激活：恢复定时器/网络请求')
  timer = setInterval(fetchData, 5000)
})

onDeactivated(() => {
  console.log('组件休眠：清理资源')
  clearInterval(timer)
})
</script>

对比常规生命周期：

场景	常规组件	被缓存组件
首次加载	created → mounted	created → mounted → activated
离开	beforeUnmount → unmounted	deactivated
再次进入	重新创建	activated

三、常见问题解决

1. 组件未缓存

原因：组件未声明 name 属性

解决方案：

<!-- CompA.vue -->
<script>
export default { name: 'CompA' }
</script>

<!-- 或使用 setup 语法糖 -->
<script setup>
defineOptions({ name: 'CompA' }) // 需安装 unplugin-vue-define-options 插件
</script>

2. 动态切换卡顿

优化方案：

使用异步组件加载（结合 defineAsyncComponent）

添加 CSS 过渡动画：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

3. 表单状态丢失

强制刷新缓存：通过 key 属性重置组件
```
<KeepAlive>
  <component :is="currentComponent" :key="customKey" />
</KeepAlive>
```
切换时更新 customKey 值即可触发重新渲染。

四、性能优化建议

按需缓存：仅对高频切换或状态复杂的组件使用缓存
内存控制：设置 max 属性避免内存溢出（推荐值：3-5）

数据持久化：在 deactivated 时保存状态至 localStorage：

onDeactivated(() => {
  localStorage.setItem('formData', JSON.stringify(formState))
})

五、完整代码示例

<template>
  <div class="container">
    <div class="switch-buttons">
      <button 
        v-for="(comp, name) in components" 
        :key="name"
        @click="currentComponent = comp"
        :class="{ active: currentComponent === comp }"
      >
        {{ name }}
      </button>
    </div>

    <KeepAlive :max="3">
      <Transition name="fade" mode="out-in">
        <component :is="currentComponent" />
      </Transition>
    </KeepAlive>
  </div>
</template>

<script setup>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'

const components = { CompA, CompB }
const currentComponent = shallowRef(CompA)
</script>

<style scoped>
.switch-buttons {
  margin-bottom: 20px;
}
button {
  padding: 8px 16px;
  margin-right: 10px;
  &.active {
    background: #1890ff;
    color: white;
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

扩展应用场景：