如何用Vue3组合式API实现v-lazy图片懒加载功能？

本文共计876个文字，预计阅读时间需要4分钟。

目录 + 前置知识 + Intersection Observer + Vue3 指令周期 + image 对象 + 思路 + 完整代码 + 总结 + 前置知识 + Intersection Observer + 浏览器提供的API，用于检测目标和祖先元素/顶级文档（viewport）+ 交叉状态的方法

目录

• 前置知识
• Intersection Observer
• Vue3指令周期
• image对象
• 思路
• 完整代码
• 总结

前置知识

Intersection Observer

浏览器提供api，用于检测目标元素和祖先元素/顶级文档视窗 (viewport) 交叉状态的方法。

const observer = new IntersectionObserver(function (IntersectionObserverEntry) {},options); observer.observe(el);

构造函数接收一个回调函数，一个配置对象（可选），返回一个观察器实例。