本篇文章主要以理解Vue3动态组件，及其相关应用与问题解析。 什么是 Vue3 动态组件？简单来说，这里的动态，即：能够根据组件的呈现条件，来调整好自己需要呈现的组件，以此来满足对需求的实现。 注：和动态样式一样，通过用户的操作来确定是什么类型的组件。 基本使用在 Vue3 中，使用动态组件非常简单，我们只需要在模板中使用标签，并通过设置组件的is属性来指定要渲染的组件。例如： 其中，currentComponent是一个变量，它的值可以是以下 2 种： 已注册的组件名，或 HTML 标签名称导入的组件对象以下是示例： ... 在这个例子中，我们可以看到，component 所呈现的组件，是由isGroup来决定的。 注意：如果将组件本身传递给 is 而不是其名称，则不需要注册，例如在 应用场景灵活运用 Vue3 的动态组件功能，能够帮助我们满足动态性和灵活性的需求： 条件渲染这也是上面所说的，根据组件呈现的条件来呈现不同的组件。如：根据用户权限加载权限组件或根据用户选择加载不同的组件（可移动看上面的示例！！） 动态表单根据表单类型及步骤，动态地渲染表单，以免加载整个表单，比如在我们进行登录的时候，会遇到诸如验证码的东西，有时候产品的需求可能需要我们在不同情况下换验证码的方式：可能有滑块、填数字等。 复用和扩展组件利用动态化的呈现，能够在一定程度下，减少对组件的重复利用，这样也便于争取内存和空间。 配置组件的选择在一些低代码平台中，通过对组件进行动态化处理，我们能够根据用户配置选择和加载特定组件，快速生成定制化应用程序 路由视图切换在路由器中使用动态组件实现动态路由视图切换，根据路由路径加载相应组件，实现无缝页面切换 示例通过组件名来动态更新组件 - (动态更新)我们可以看以下的示例，我们通过两个按钮来改变currentPage的值，以此来改变component中的:is的值，来改变该组件。 Content: 当然，我们也是能够将组件名对象存入一个模块中，进而我们去接收其参数，来实现组件的动态渲染，如以下例子： 动态组件间的通信动态组件的传值，除了支持v-bind传值以外，还支持ref引用传值。使用引用传值的时候，需要注意的是：需要确定组件之后，再使用ref属性进行传值，否则将会无法获取应用组件的属性。 组件销毁与缓存当我们在切换组件的时候，在组件切换之后，会导致原组件销毁，导致之前的数据丢失。这个时候，如果我们能够在组件切换的过程中能够保持组件的状态的话，避免一些重复渲染而导致的性能问题，则我们能够在动态组件上使用keep-alive来缓存组件中的数据。 template> 总结动态组件是 Vue 中非常重要的一个组件类型，我们能够通过去使用它，来实现更为复杂的切换组件逻辑。当然，使用该组件类型，笔者认为还是需要学会去搭配不同的类型及方法，已达到更好的性能优化、简洁代码的目的。 作者：ice_dk链接：https://juejin.cn/post/7345297230201258024