const {stop} = useIntersectionObserver(target, fn, options)1、参数一target示意被监听的DOM元素
2、参数二是回调函数，用于告诉监听的动作（回调函数的第一个形参isIntersecting示意被监听的元素曾经进入了可视区）
3、参数三 示意配置选项
stop 是进行察看是否进入或移出可视区域的行为
const { stop } = useIntersectionObserver(target 是察看的指标dom容器，必须是dom容器，而且是vue3.0形式绑定的dom对象 target, // isIntersecting 是否进入可视区域，true是进入 false是移出 // observerElement 被察看的dom ([{ isIntersecting }], observerElement) => { // 在此处可依据isIntersecting来判断，而后做业务 },)业务性能场景
基于该办法实现组件的懒加载
第一步:在SRC下封装一个钩子函数,src/hooks/index.js文件夹下;
代码如下:
// 封装一个通用的办法实现数据的懒加载import { useIntersectionObserver } from '@vueuse/core'import { ref } from 'vue'export const useLazyData = (apiFn) => { // target示意组件的最外层div元素 const target = ref(null) // 懒加载接口返回的数据 const result = ref([]) // 监听组件是否进入可视区 const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => { // 如果target对应的DOM进入可视区，那么该回调函数就触发 if (isIntersecting) { // 被监听的DOM进入了可视区:此时调用接口获取数据；进行持续监听 stop() apiFn().then(data => { result.value = data.result }) } }) // result示意接口懒加载获取的业务数据 // target示意被监听的DOM元素，须要在模板中被ref属性绑定 return { result, target }}第二步:在所须要的文件夹中导入
例如:
懒加载的益处:页面加载速度快、能够加重服务器的压力、节约了流量,用户体验好