vue3性能优化-异步组件

1.下载 @vueuse/core

npm i @vueuse/core

@vueuse/core官方网址
https://vueuse.org/core/useintersectionobserver/
2.使用

<div class="recommend-course-content"  ref="target">
         <CourseItem :columns="columns" :newCourseList="newCourseList" v-if='targetIsVisible'></CourseItem>
       </div>

const CourseItem = defineAsyncComponent(() =>
   import('@/components/home/CourseItem.vue')
 )
 // 异步组件
import { useIntersectionObserver } from '@vueuse/core'
const newCourseList=ref([])
const target = ref(null);
const targetIsVisible = ref(false);
const { stop } = useIntersectionObserver(
   target,
   ([{ isIntersecting }]) => {
     console.log(isIntersecting,'isIntersecting');
     if( isIntersecting ) {
         targetIsVisible.value = isIntersecting
     }
   },
 )