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>