vue3异步组件--当用户访问到了组件再去加载

当用户还未访问到该组件时，就已经加载了该组件

处理优化： 引入defineAsyncComponent到异步组件和 vueuse的useIntersectionObserver 需要安装@vueuse/core包

vueuse.org/core/useInt…

<template>
    <A />
    <B />
    <div ref="target">
        <C v-if='targetIsvisible'/>
    </div>
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core'
import A from "./A.vue";
import B from "./B.vue";

const C = defineAsyncComponent(() => {
    return import('./C.vue')
})
const target = ref(null)
const targetIsvisible = ref(false)
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
     if (targetIsvisible) { 
         targetIsvisible.value = isIntersecting 
     }
// })
</script>