Vue 3 项目里通过自定义指令实现图片懒加载

本文只说明代码如何实现，例如自定义指令、插件的基础知识请移步Vue官方文档。

说明：useIntersectionObserver 是VueUse里面用于检测目标元素是否在可视区域的一个函数。

安装VueUse

npm i @vueuse/core

src/directive/index.js

import { useIntersectionObserver } from "@vueuse/core"export const lazyDirective = {install(app) { app.directive('lazy', (el, binding) => {const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {// 图片进入可视区域if (isIntersecting) {el.src = binding.valuestop() // 只需观察一次元素，避免重复观察}})})}
}

main.js

import { lazyDirective } from './directive'app.use(lazyDirective)

注：本文使用了Vue中自定义指令和插件结合的方法实现