夜幕降临，结束了一天敲代码的 “战斗”，眼睛酸胀、大脑发懵？先别急着关闭电脑休息，来这儿坐坐！今天不聊复杂的架构，也不讲晦涩的原理，就分享一个超实用的 Vue2 和 Vue3 动态组件技巧，专治组件切换时的各种 “混乱症”，保准让你明天写代码时思路清晰，效率翻倍！先问问大家，有没有遇到过在多个组件间切换时，逻辑乱成一团麻，数据传递也出问题？别担心，答案马上揭晓！

动态组件：组件切换的 “魔法开关”

在 Vue 项目开发中，组件切换是很常见的需求。比如一个用户中心页面，有时要展示个人信息，有时要显示订单列表，还可能需要切换到收藏夹页面。要是每个组件都单独处理，不仅代码冗长，而且逻辑会变得异常复杂，让人头疼不已。而动态组件，就像是一个神奇的 “开关”，能帮我们轻松实现组件的灵活切换。

在 Vue2 中，我们通过<component>元素和is属性来实现动态组件：

<template>
<div>
<!-- 按钮用于切换组件 -->
<button @click="currentComponent = 'userInfo'">显示个人信息</button>
<button @click="currentComponent = 'orderList'">显示订单列表</button>
<!-- 动态组件，根据currentComponent的值渲染不同组件 -->
<component :is="currentComponent"></component>
</div>
</template>
<script>
// 引入需要切换的组件
import UserInfo from './UserInfo.vue';
import OrderList from './OrderList.vue';
export default {
components: {
UserInfo,
OrderList
},
data() {
return {
// 当前要显示的组件名称
currentComponent: 'userInfo'
};
}
};
</script>

在上面的代码里，currentComponent变量决定了<component>标签最终渲染哪个组件。点击不同的按钮，修改currentComponent的值，就能实现组件的切换，是不是很简单？

Vue3 中，动态组件的使用方式基本相同，但结合组合式 API，能让代码更加简洁清晰：

<template>
<div>
<button @click="changeComponent('userInfo')">显示个人信息</button>
<button @click="changeComponent('orderList')">显示订单列表</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import { ref } from 'vue';
import UserInfo from './UserInfo.vue';
import OrderList from './OrderList.vue';
export default {
components: {
UserInfo,
OrderList
},
setup() {
// 使用ref定义响应式变量存储当前组件
const currentComponent = ref('userInfo');
const changeComponent = (componentName) => {
currentComponent.value = componentName;
};
return {
currentComponent,
changeComponent
};
}
};
</script>

除了基础的组件切换，动态组件在处理数据传递和生命周期钩子时也有不少学问。当动态组件切换时，被替换的组件会调用beforeDestroy和destroyed钩子，新插入的组件则会触发beforeMount和mounted钩子。合理利用这些钩子函数，可以在组件切换前后进行数据清理、初始化等操作，确保组件切换过程平稳顺畅。

问题解答

前面提到的 “在多个组件间切换时，逻辑乱成一团麻，数据传递也出问题”，使用动态组件就能很好地解决。通过统一管理is属性绑定的变量，集中处理组件切换逻辑，让代码结构更清晰。同时，借助组件的生命周期钩子，在合适的时机处理数据传递，就能避免数据混乱的问题。

动态组件切换时，你更倾向先销毁旧组件还是保留状态？

在使用动态组件时，有一种场景常常引发讨论：当切换组件时，是先销毁旧组件，释放资源，还是保留旧组件的状态，下次切换回来时直接展示？保留状态可以提升用户体验，减少重复加载，但会占用更多内存；先销毁再创建则更 “干净利落”，不过可能会带来短暂的加载延迟。你在项目开发中是怎么做的？更支持哪种方式呢？快来评论区分享你的经验和想法吧！

今天的分享就到这里啦！希望这个动态组件的小技巧，能像一杯温暖的热饮，驱散你一天的疲惫与烦恼。带着这份新知识，好好享受夜晚的悠闲时光吧～要是觉得有用，别忘了点赞、关注，每天晚上都有这样实用又解压的干货等你来！咱们明天同一时间，不见不散！