vue3 中使用异步组件

1. 介绍

vue3 中局部组件，使用异步导入

2. 使用

<template>
  <!-- 当 visible 为 true 时，才会载入该组件的资源 -->
  <DetailDialog v-if="visible" />
</template>
<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    DetailDialog: defineAsyncComponent(() => import('./DetailDialog.vue')),
  },

  data() {
    return {
      visible: false,
    };
  },
};
</script>

3. 参考

• Vue 3 异步组件 vs. 函数式组件：谁才是王者 (opens new window)