目录一、解释二、懒加载指令一、解释在获取数据然后渲染过程中在没显示到屏幕视口中的内容可以先不加载提升性能因为可能要加载的图片非常多用组件包裹不太合适所以用指令的形式二、懒加载指令src/directives/modules/lazy.jsimport { useIntersectionObserver } from vueuse/core export default { // 图片懒加载在用户无法看到图片时不加载图片在用户可以看到图片后加载图片 // 如何判断用户是否看到了图片useIntersectionObserver // 如何做到不加载图片网络img 标签渲染图片指的是 img 的 src 属性src 属性是网络地址时则会从网络中获取该图片资源。那么如果 img 标签不是网络地址呢把该网络地址默认替换为非网络地址然后当用户可见时在替换成网络地址。 mounted(el) { // 1. 拿到当前 img 标签的 src const imgSrc el.src // 2. 把 img 标签的 src 替换为本地地址也可以替换为空或者一个透明的图片 el.src const { stop } useIntersectionObserver(el, ([{ isIntersecting }]) { if (isIntersecting) { el.src imgSrc stop() } }) } }src/directives/index.js中注册import lazy from ./modules/lazy.js export default { install(app) { app.directive(lazy, lazy) } }在main.js中useapp.use(directives)app.use(directives)为需要懒加载的图片添加这个懒加载指令img v-lazy ...上述代码已经可实现这个了但是为了像组件那样自动注册可以用以下代码实现替换src/directives/index.js/** * 全局注册指令 */ export default { async install(app) { const directives import.meta.glob(./modules/*.js) for (const [key, value] of Object.entries(directives)) { const d await value() // 拼接组件注册的 name const arr key.split(/) const directiveName arr[arr.length - 1].replace(.js, ) // 完成注册 app.directive(directiveName, d.default) } } }至此懒加载指令完成