导入资源
导入用到的属性
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）
