vue3中使用异步组件

vue3中使用异步组件可以解决两个问题：
1.提升性能（类似于懒加载）
2.分包
下载插件 npm i @vueuse/core -S

1.提升性能（懒加载）

父组件

<template>
  <div>
    <h1>异步组件</h1>
        <A />
    <B />
    <div ref="target">
      <C v-if="targetIsVisible" />
    </div>
  </div>
</template>

<script setup>
  import { defineAsyncComponent } from 'vue';
  import { useIntersectionObserver } from '@vueuse/core';
  import A from './A.vue';
  import B from './B.vue';
  const C = defineAsyncComponent(() => import('./C.vue'));
  // 安装异步组件需要安装的包 npm i @vueuse/core -S
  const target = ref(null);
  const targetIsVisible = ref(false);
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    targetIsVisible.value = isIntersecting;
  });
</script>
<style></style>

子组件A：

<template>
  <div style="height: 500px; background-color: aquamarine">
    A
  </div>
</template>

<script setup>
</script>

<style></style>

子组件B：

<template>
  <div style="height: 500px; background-color: chocolate"> B </div>
</template>

<script setup></script>

<style></style>

子组件C：

<template>
  <div> C </div>
  <img src="../../assets/logo.png" alt="" />
</template>

<script setup></script>

<style></style>

页面没有滑到C组件的位置的时候，C组件不加载
滑到C组建的位置的时候C组件才加载

2.分包

vue在打包的时候会把异步组件分成单独的包，不与总包合在一起，异步组件需要搭配vue3内部组价 Suspense 使用
父组件

<template>
  <div>
    <h1>异步组件</h1>
    <Suspense>
      <template #default>
        <A />
      </template>
      <template #fallback> ...加载中 </template>
    </Suspense>

    <B />
    <!-- <C /> -->
    <div ref="target">
      <C v-if="targetIsVisible" />
    </div>
  </div>
</template>

<script setup>
  import { defineAsyncComponent } from 'vue';
  import { useIntersectionObserver } from '@vueuse/core';
  // import A from './A.vue';
  import B from './B.vue';
  // import C from './C.vue';
  const A = defineAsyncComponent(() => import('./A.vue'));
  // 安装异步组件需要安装的包 npm i @vueuse/core -S
  const target = ref(null);
  const targetIsVisible = ref(false);
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    targetIsVisible.value = isIntersecting;
  });
</script>

<style></style>

子组件A：BC 组件未修改，

<template>
  <div style="height: 500px; background-color: aquamarine">
    A
    {{ list }}
  </div>
</template>

<script setup>
  import axios from 'axios';
  import { ref } from 'vue';
  const list = ref([]);
  let res = await axios.get('http://vapi.youlai.tech/api/v1/menus');
  list.value = res.data.data;
</script>

<style></style>

文件打包过后dist文件夹里边的会多出来一个A.xxxxxx.js,C.xxxxxx.js，异步组件会被单独分包出来。