vue3异步组件（提升性能）

npm i @vueuse/core

1、使用场景1

组件按需引入：当用户访问到了具体组件再去加载该组件

            <template>
                <div ref='target'>
                    <C v-if='targetIsVisible'></C>
                </div>
            </template>
            <script setup>
            import { useIntersectionObserver } from '@vueuse/core'
            const C = defineAsyncComponent(() =>
              import('../components/C.vue')
            )
            const target = ref(null);
            const targetIsVisible = ref(false);
            const { stop } = useIntersectionObserver(
              target,
              ([{ isIntersecting }]) => {
                if( isIntersecting ) {
                    targetIsVisible.value = isIntersecting
                }
              },
            )
            </script>

2、使用场景2

 A组件是异步的，如axios或promise等等，需要用Suspense

        <Suspense>
            <template #default>//加载出数据后
                <A></A>
            </template>
            <template #fallback>//没加载出数据时
                加载中...
            </template>
        </Suspense>
        <script setup>
        const A = defineAsyncComponent(() =>
          import('../components/A.vue')
        )
        </script>

        <div ref='target'>
           <Suspense v-if='targetIsVisible'>
            <template #default>//加载出数据后
               <C></C>
            </template>
            <template #fallback>//没加载出数据时
                加载中...
            </template>
         </Suspense>    
         </div>   

 优点：npm run build打包完成后，异步组件有单独的js文件，是从主体js分包出来的。