通过自定义指令实现图片懒加载

前提：使用到了VueUse插件。
先创建自定义插件文件夹

// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core' // 这个是VueUse里的一个方法export const lazyPlugin = {install(app) {// 懒加载指令逻辑  定义全局指令app.directive('img-lazy', {mounted(el,binding) {// el: 指令绑定的元素 在这里指img元素// binding：binding.value 指令等于号后面绑定的表达式的值 这里指图片url// useIntersectionObserver方法是判断目标元素是否进入视口区域// 解构出stop方法，手动停止监听防止内存浪费const { stop } = useIntersectionObserver(el,([{ isIntersecting }]) => {if (isIntersecting) {// 进入视口区el.src = binding.valuestop()}},)}})}
}

在需要实现图片懒加载区域添加上自定义指令

<img v-img-lazy="item.picture" alt="">

在main.js中引入注册

// 引入懒加载指令插件并注册
import { lazyPlugin } from './directives'
const app = createApp(App)
app.use(lazyPlugin)

注意点就是：useIntersectionObserver对于元素的监听是一直存在的，除非手动停止监听，所以stop方法的目的就是：在监听的图片第一次完成加载之后就停止监听