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>
img标签中的的v-img-lazy指令就是懒加载指令，这是vue项目的一般写法，在指令前添加v-即可
看看效果：
当页面刷到人气推荐时，加载了四张新的图片