一、首先介绍一下为什么需要数据懒加载

自己理解：在候需要的时候，才加载，由于vue是单页应用SPA是一种网络应用程序或网站的模型，根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。加上js是一门单线程语言，所以第一次请求的数据过大，可能会导致页面的堵塞

二、数据懒加载的方式

useIntersectionObserver

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

下载方式

npm i @vueuse/core 或者 yarn add @vueuse/core

这个是我们需要的方法(看了一下源码，发现自己目前的水平还没达到，就不给大家介绍源码解读啦)

// stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断，然后做业务
  },
)

具体实现代码

// 导入需要的工具
import { useIntersectionObserver } from '@vueuse/core'
// 声明一个函数，为了更好的复用
export const useLazyData = (fn, target) => {
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        stop()
        fn && fn()
      }
    }
  )
  return target
}

然后我们使用的时候就需要传入一个dom元素和一个函数，当然，如果你不需要发送ajax拿数据也可以不用

IntersectionObserver浏览器提供的原生方法

语法

new IntersectionObserver(callback)

参数

callback

当目标元素的可见百分比超过阈值时调用的函数。回调接收两个参数作为输入：
entries

一组IntersectionObserverEntry对象，每个对象代表一个被跨越的阈值，或者变得比该阈值指定的百分比更明显或更不可见。

observer

IntersectionObserver正在为其调用回调的。
options 可选的

自定义观察者的可选对象。如果options未指定，则观察者使用文档的视口作为根，没有边距，阈值为 0%（意味着即使一个像素的变化也足以触发回调）。您可以提供以下选项的任意组合：
root

一个Element或Document对象，它是预期目标的祖先，其边界矩形将被视为视口。目标的任何在可见区域中不可见的部分root都被视为不可见。
rootMargin

一个字符串，它指定在计算交点时添加到根的bounding_box的一组偏移量，有效地缩小或扩大根以进行计算。margin语法与 CSS属性的语法大致相同；有关边距如何工作和语法的更多信息，请参阅交集根和根边距。默认值为“0px 0px 0px 0px”。
threshold

单个数字或 0.0 到 1.0 之间的数字数组，指定观察目标的交集区域与总边界框区域的比率。值 0.0 意味着即使是单个可见像素也算作可见目标。1.0 表示整个目标元素可见。有关如何使用阈值的更深入描述，请参阅阈值。默认值为 0.0 的阈值。

上面都是mdn的介绍

自己的理解使用时，new一个IntersectionObserver，他是一个函数，第一个参数是一个回调函数，可以传递两个参数分别是函数和对象
函数的参数：isIntersecting代表是否进入
对象有一属性threshold代表到边界的什么地方可见

实现图片懒加载的具体代码


 const observer = new IntersectionObserver(([{ isIntersecting }]) => {
 // 判断是否进入
      if (isIntersecting) {
     //unobserve需要监听的dom元素
        observer.unobserve(el)
        el.onerror = () => {
        //如果失败了就将默认的值赋值给图片
          el.src = defaultImg
        }
        //将传递过来的属性赋值给src
        el.src = binding.value
      }
    }, {
    //距离边界多久可见
      threshold: 0.01
    })
    observer.observe(el)

原生方式实现数据懒加载

我们可以通过浏览器的滚动事件

window.onscroll(e){console.log(e.target)}

记得没错的话，应该是通过e.target.documentElement里面的一个参数能够获取到窗口滚动的距离，然后通过计算元素到浏览器的距离，然后进行发送ajax，实现起来还是很简单的

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

vue3数据懒加载和图片懒加载的方法