Vue2（17） 动态组件 & 异步组件学习笔记

Vue2 动态组件 & 异步组件学习笔记

1. 动态组件

在Vue中，动态组件允许我们在多个组件之间切换，而无需每次都销毁和重新创建它们。这在多标签界面或选项卡界面中非常有用。然而，如果组件在切换过程中被销毁和重新创建，其状态将无法保持。为了避免这种情况，我们可以使用<keep-alive>元素来缓存动态组件。

示例：

假设我们有一个多标签界面，包含“Posts”、“Archive”等标签。如果我们直接使用动态组件，那么每次切换标签时，Vue都会创建一个新的组件实例。这意味着，如果我们选择了一篇文章并切换到“Archive”标签，然后再切换回“Posts”，之前选择的文章将不再显示。

为了解决这个问题，我们可以将动态组件包裹在<keep-alive>元素中：

<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

这样，即使组件未被渲染，它的状态也会被保持。需要注意的是，<keep-alive>要求被切换到的组件都有自己的名字，这可以通过组件的name选项或局部/全局注册来实现。

2. 异步组件

在大型应用中，我们通常需要将应用分割成多个小的代码块，并在需要时才从服务器加载它们。Vue允许我们以工厂函数的方式定义异步组件，这个工厂函数会异步解析组件定义。Vue只会在组件需要被渲染时触发该工厂函数，并将结果缓存起来供未来重渲染使用。

示