目的

实现当组件进入可视区域之后才去发请求加载数据，没有进入可视区域时，ajax请求是不发的。

思路

如何判断一个dom元素是否进入了可见区域？

• 传统： 获取dom的位置，手动判断。（距离页面顶部的距离 比较 滚动条卷起的高度，还要考虑元素自己的高度 ）
• 现在：直接判断元素进入可视区域的比例

我们可以使用 @vueuse/core 中的 useIntersectionObserver （它就是依靠h5的直接判断元素进入可视区域的比例）来实现监听进入可视区域行为(配合vue3.0的组合API)

useIntersectionObserver 函数

// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出
const { stop } = useIntersectionObserver(
  target, // target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断，然后做业务
  },
)