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

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

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

目录

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

前置知识

Intersection Observer

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