vue3中defineComponent和defineAsyncComponent的区别及使用场景

defineComponent 是一个函数，用于定义一个 Vue 组件，在 Vue 3 中，它是用来创建一个组件的选项对象的函数。defineAsyncComponent 是一个函数，用于定义一个异步组件，它可以是一个高阶函数，用于创建异步加载的组件。

使用场景：

1. defineComponent: 当你需要定义一个同步的、单文件组件时，你可以使用它。
2. defineAsyncComponent: 当你需要定义一个异步加载的组件时，你可以使用它。例如，你可能有一个组件，它在某些情况下需要加载，而在其他情况下不需要。

下面是两者的简单示例：

1. 使用 defineComponent 定义一个同步组件：

import { defineComponent } from 'vue';
 
export default defineComponent({
  data() {
    return {
      message: 'Hello Vue 3!',
    };
  },
  template: `<div>{{ message }}</div>`,
});

2. 使用 defineAsyncComponent 定义一个异步组件：

import { defineAsyncComponent } from 'vue';
 
const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
);
 
export default {
  components: {
    AsyncComp
  }
}

在上面的异步组件示例中，我们创建了一个名为 AsyncComp 的异步组件，该组件将从 ./components/AsyncComponent.vue 文件中异步加载。当此组件被首次渲染时，它将显示为一个加载状态，然后当异步组件加载完成时，它将显示加载的组件。