vue3@vueuse/core实现懒加载功能

1，安装@vueuse/core
//yarn 安装

yarn add @vueuse/core

//或者npm

npm install @vueuse/core

2.直接上例子

<script setup lang='ts'>
import A from './components/A.vue';
import B from './components/B.vue';

import { defineAsyncComponent, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core';

const C = defineAsyncComponent(() =>
  import('./components/C.vue')
)

const tar = ref(null)

const visabled = ref(false)

const {stop} = useIntersectionObserver(
    tar,
    ([{isIntersecting}]) =>{
        if(isIntersecting){
            visabled.value = isIntersecting
        }
    }
)

</script>
           
<template>
    <div>
        <A />
        <B />
        <div ref="tar">
            <C v-if="visabled" />
        </div>
    </div>
</template>
           
<style scoped lang='scss'>

</style>

封装一个懒加载功能:

// 封装一个通用的方法实现数据的懒加载

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useLazyData = () => {
    const target = ref(null);
    const targetIsVisible = ref(false);

    const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
        if (isIntersecting) {
            stop();
            targetIsVisible.value = isIntersecting;
        }
    });
    // result表示接口懒加载获取的业务数据
    // target表示被监听的DOM元素，需要在模板中被ref属性绑定
    return { target, targetIsVisible }
}

使用:

import { useLazyData } from "./utils/lazy";
const { target, targetIsVisible } = useLazyData();

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