vue3 组件数据懒加载逻辑复用

前言

我们现在每个组件中发起ajax请求一般都是在created钩子函数或者mounted钩子函数中发起的，生命周期有一个特点：跟着组件的初始化过程走自动执行，开发者无法控制，而电商类的首页页面一般会很长，有的模块组件甚至都不会出现在视口中，这样无脑的加载数据，显然是不合理的存在浪费，为了解决这个问题，我们引入了组件数组懒加载

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、何为组件数据懒加载？ ？

有组件正式进入到视口中时，才把组件内部的ajax请求发起，否则不请求数据 。

优点

1. 提高页面渲染性能

2. 减轻了服务器的压力

二、判断组件进入视口

1.我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听组件进入可视区域行为，需要配合vue3.0的组合API的方式才能实现

先分析下这个useIntersectionObserver 函数：

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {