数据懒加载（Vue3）

导入资源

导入用到的属性

useIntersectionObserver函数

我们可以使用 `@vueuse/core` 中的 `useIntersectionObserver` 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。

1.UseIntersectionObserver 函数参数：

observerList： 由被观察目标所组成的数组，数组项是由React.createRef构建出来的对象

callback: 当目标元素被曝光所需要触发的函数，该函数接受一个参数indexList，由被曝光元素在observerList数组中的索引组成

infinite：是否持续观察目标元素，默认值为false。（因为曝光打点一般只需上报一次）

opt：可以自定义曝光条件（值的构成参考MDN），默认为{ threshold: [1] }，只有当目标元素完全暴露在可视区内才触发回调

2.UseIntersectionObserver 返回值:

返回一个数组，数组的第一项元素由React的useState所返回。

---

懒加载执行原理

①进入指定区域之前监听目标元素

②当目标进入指定区域再调用接口获取数据，给数组赋值，再遍历进行模板的数据渲染，并且停止对其的监听操作

③threshold（阈 yu ：引申为界限或范围）表示进入可视区域的比例，用来控制加载时机，这里希望组件刚进入可视区就触发回调

④将参数返回，并将这个工具函数导出 供组件使用

代码流程

 使用：

1.导入懒加载函数

import { useLazyData } from '@/hook/index.js'

2.为懒加载函数传参，参数是接口，如果需要给接口传参，那么就写成函数形式

修改变量名并且接口不传参的情况

接口函数形式传参

给result重命名为goods并返回给模板使用

3.给模板的最外层壳子加ref属性，值为target     注意：ref不要加给组件标签，会报错

添加target

4.goods为接口返回的数据，即result，作为遍历的数据

遍历goods（result）