Vue 3 动态组件教程

1. 动态组件简介

动态组件是 Vue 3 中一个强大的特性，允许我们在运行时动态切换组件。通过使用内置的 <component> 元素和特殊的 is 属性，我们可以实现组件的动态渲染。

2. 基本使用方法

2.1 基础语法

<template>
  <component :is="currentComponent"></component>
</template>

<script setup>
import { ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const currentComponent = ref(ComponentA)
</script>

2.2 组件切换

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

<script setup>
import { ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const currentComponent = ref(ComponentA)

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

3. 组件缓存

3.1 使用 KeepAlive

为了保持组件状态，避免重复渲染，我们可以使用 <KeepAlive> 组件：

<template>
  <KeepAlive>
    <component :is="currentComponent"></component>
  </KeepAlive>
</template>

3.2 缓存配置

<template>
  <KeepAlive :include="['ComponentA']" :max="5">
    <component :is="currentComponent"></component>
  </KeepAlive>
</template>

4. 最佳实践

4.1 组件注册

推荐使用异步组件和路由懒加载：

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/HeavyComponent.vue')
)
</script>

4.2 属性传递

<template>
  <component 
    :is="currentComponent"
    v-bind="componentProps"
    @custom-event="handleEvent"
  ></component>
</template>

<script setup>
import { ref } from 'vue'

const componentProps = ref({
  title: '动态标题',
  description: '组件描述'
})

const handleEvent = (data) => {
  console.log('接收到子组件事件:', data)
}
</script>

5. 高级用法

5.1 动态切换多个组件

<template>
  <div>
    <select v-model="selectedComponent">
      <option value="component-a">组件 A</option>
      <option value="component-b">组件 B</option>
      <option value="component-c">组件 C</option>
    </select>

    <KeepAlive>
      <component :is="components[selectedComponent]"></component>
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'

const selectedComponent = ref('component-a')

const components = {
  'component-a': ComponentA,
  'component-b': ComponentB,
  'component-c': ComponentC
}
</script>

5.2 生命周期钩子处理

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

onActivated(() => {
  console.log('组件被激活')
})

onDeactivated(() => {
  console.log('组件被停用')
})
</script>

6. 性能优化

6.1 异步加载优化

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})
</script>

6.2 缓存策略优化

<template>
  <KeepAlive
    :include="/^Component[AB]$/"
    :exclude="['ComponentC']"
    :max="10"
  >
    <component :is="currentComponent"></component>
  </KeepAlive>
</template>

7. 常见问题

7.1 组件通信问题

使用 provide/inject 或 Vuex/Pinia 进行状态管理：

<script setup>
import { provide, inject } from 'vue'

// 在父组件中
provide('sharedData', {
  data: ref({}),
  methods: {
    updateData(newData) {
      // 更新数据
    }
  }
})

// 在子组件中
const sharedData = inject('sharedData')
</script>

7.2 内存泄漏防护

<script setup>
import { onUnmounted } from 'vue'

// 清理定时器和事件监听
const timer = setInterval(() => {
  // 定时任务
}, 1000)

onUnmounted(() => {
  clearInterval(timer)
})
</script>