vue3的动态组件是如何工作的

Vue3 的动态组件相比于 Vue2 有了较大的改变，本文将详细讲解 Vue3 的动态组件是如何工作的，包括其实现原理和示例说明。

---

什么是动态组件

Vue 中的组件是指可复用并具有独立功能的代码块，根据其作用域及其之间的交互可以实现复杂的组件化应用。而动态组件，顾名思义指在运行时可以动态地切换所渲染的组件。

Vue3 中动态组件的实现原理

在 Vue2 中，动态组件使用的是 keep-alive 组件，但是 Vue3 中这种方式已经被废除。现在 Vue3 中实现动态组件的方式主要依赖于 defineAsyncComponent 和 Teleport 组件。

1. defineAsyncComponent

defineAsyncComponent 是 Vue3 中的新 API，当注册一个异步组件时就会返回一个符合标准的 Vue 组件定义对象，这个对象包含了 setup 函数和 render 函数。当使用这个异步组件时，Vue3 会自动运行 setup 函数来执行数据的初始化，然后再运行 render 函数来渲染组件。

2. Teleport 组件

Teleport 是 Vue3 中新引入的一个组件，它可以在外部渲染组件并将其插入到目标组件中。Teleport 组件中有两个可选属性：to 和 disabled。

其中，to 属性的值代表了目标组件，在目标组件中需要使用一个与 to 相同的 Teleport 组件来接收插入的组件，同时这个接收组件需要使用 slot 来接收即将插入的组件；disabled 属性表示是否开启 Teleport 插入。

Vue3 中动态组件的示例

• 示例一：异步动态组件

<template>
  <div>
    <h3>这是异步动态组件的示例</h3>
    <button @click="toggleComponent">切换异步组件</button>
    <teleport to="body">
      <Suspense v-if="showComponent" >
        <MyAsyncComponent />
      </Suspense>
    </teleport>
  </div>
</template>

<script>
import { defineAsyncComponent, Suspense } from 'vue'

// 使用 defineAsyncComponent 声明一个异步组件
const MyAsyncComponent = defineAsyncComponent(() =>
  import('./MyAsyncComponent.vue')
)

export default {
  components: {
    MyAsyncComponent,
  },
  data() {
    return {
      showComponent: false,
    }
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent
    },
  },
}
</script>

在上面的示例中，我们使用 defineAsyncComponent 声明了一个异步组件 MyAsyncComponent，当点击按钮时，通过开关 showComponent 属性来切换显示和隐藏组件。

使用 teleport 和 Suspense 组件来异步加载并渲染该组件，teleport 组件的 to 属性值为 body，表示需要将异步组件插入到页面的 body 元素中。

• 示例二：多个异步组件动态加载

<template>
  <div>
    <h3>这是多个异步组件动态加载的示例</h3>
    <div>
      <button @click="changeComponent(1)">切换异步组件1</button>
      <button @click="changeComponent(2)">切换异步组件2</button>
      <button @click="changeComponent(3)">切换异步组件3</button>
    </div>
    <teleport to="body">
      <template v-if="currentComponent">
        <suspense :fallback="loading"> 
          <component :is="currentComponent" />
        </suspense>
      </template>
    </teleport>
  </div>
</template>

<script>
import { defineAsyncComponent, Suspense, ref } from 'vue'

// 异步组件
const AsyncComponent1 = defineAsyncComponent(() =>
  import('./AsyncComponent1.vue')
)
const AsyncComponent2 = defineAsyncComponent(() =>
  import('./AsyncComponent2.vue')
)
const AsyncComponent3 = defineAsyncComponent(() =>
  import('./AsyncComponent3.vue')
)

export default {
  components: {
    AsyncComponent1,
    AsyncComponent2,
    AsyncComponent3,
  },
  setup() {
    const currentComponent = ref(null)
    const loading = ref('loading')
    const changeComponent = (type) => {
      switch (type) {
        case 1:
          currentComponent.value = 'AsyncComponent1'
          break
        case 2:
          currentComponent.value = 'AsyncComponent2'
          break
        case 3:
          currentComponent.value = 'AsyncComponent3'
          break
      }
    }
    return {
      currentComponent,
      loading,
      changeComponent,
    }
  },
}
</script>

在上述示例中，我们定义了三个异步组件 AsyncComponent1、AsyncComponent2 和 AsyncComponent3，并在页面上使用按钮根据需要来切换显示哪个异步组件。

在 template 标签以 v-if 条件分支的方式为最终显示的组件添加了一个 suspense 组件，并通过 currentComponent 属性值为各个不同的异步组件名称来动态渲染不同的异步组件，当组件加载完成之前，该组件的占位符为 loading。

总结

在 Vue3 中，动态组件的实现方式不再是使用 keep-alive 组件来进行组件缓存，而是通过 defineAsyncComponent 和 Teleport 组件来进行动态加载和插入组件，这样做使代码更加简洁且易于理解。