异步组件(用户看不到太多数据,但是也都加载了,那么用户没有看到反而加载首页的加载速度就会慢,为了提高首页加载效率,这一块采用异步组件来处理。)

发布时间 2023-08-27 02:05:08作者: Baipei

下载:npm i @vueuse/core

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