vue3中的图片懒加载指令及全局注册

最近重新刷了一遍黑马的小兔鲜前端项目，发现有个懒加载的指令之前还没有用过。而且写法相对固定，因此记录一下

首先，懒加载（Lazy Loading）的作用是延迟加载某些资源或组件，直到需要它们的时候再进行加载。这种技术通常用于优化性能和资源利用率，特别是在处理大量数据或复杂的应用程序中。通过懒加载，可以减少初始加载时间和资源消耗，提升用户体验，同时在需要时动态加载内容，避免不必要的加载和占用内存，通常用在处理前端图片时。

举个例子，我们在逛淘宝时，浏览某个页面时，不需要一下子就加载所有的商品图片，一是资源浪费，二是影响效率。通常是刷到哪，就什么时候加载资源，这里就用到了图片的懒加载。

一、安装使用vueUse

安装指令：

npm i @vueuse/core

找到监视页面视口的方法：

useIntersectionObserver

其作用是监视页面上某个元素当前是不是可见的

具体用法参见文档

二、编写指令方法

一般vue项目中的全局指令方法都写在src的directives文件夹下，创建index.js文件，注册以下指令

// 定义懒加载插件
import { useIntersectionObserver } from "@vueuse/core";export const lazyPlugin = {install(app) {// 懒加载指令逻辑app.directive("img-lazy", {mounted(el, binding) {// el: 指令绑定的那个元素 img// binding: binding.value  指令等于号后面绑定的表达式的值  图片url// console.log(el, binding.value);const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {//   console.log(isIntersecting);if (isIntersecting) {// 进入视口区域el.src = binding.value;stop();}});},});},
};

三、全局注册懒加载指令

在项目入口文件main.js中注册指令

import { lazyPlugin } from '@/directives'const app = createApp(App)
app.use(lazyPlugin)

四、组件中使用懒加载指令

<template><HomePanel title="人气推荐" sub-title="人气爆款 不容错过"><ul class="goods-list"><li v-for="item in hotList" :key="item.id"><RouterLink to="/"><img v-img-lazy="item.picture" alt=""><p class="name">{{ item.title }}</p><p class="desc">{{ item.alt }}</p></RouterLink></li></ul></HomePanel>
</template>