场景和指令用法

场景：某些网站首页通常会很长，用户不一定能访问到页面靠下面的图片，这类图片通过懒加载优化手段可以做到，只有进入视口区域才发送图片请求

指令用法：

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

在图片img身上绑定指令，该图片只有正式进入到视口区域时才会发送图片网络请求

实现思路和步骤

核心原理：图片进入视口才发送资源请求

• 熟悉指令语法
  如何自定义指令：
  官网：https://cn.vuejs.org/guide/reusability/custom-directives.html

• 判断图片是否进入视口（vueUse）
  官网：https://vueuse.org/core/useIntersectionObserver/#useintersectionobserver

• 测试图片监控是否生效

• 如果图片进入视口，发送图片资源请求

• 测试图片资源是否发出

// 引入vueUse 中的工具，用于懒加载实现
import { useIntersectionObserver } from '@vueuse/core'
// 懒加载，在vue3中任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令
// el为当前的DOM元素，binding为当前的指令配置对象
const vImgLazy = {
  mounted(el, binding) {
    console.log(el, binding)
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      // 当到达目标窗口时，isIntersecting 值为ture
      console.log(isIntersecting)
      if (isIntersecting) {
        // 进入视口区域
        el.src = binding.value
        stop()
      }
    })
  }
}

在组件中使用即可。

指令优化

在上诉的功能中，主要是局部指令的方式，但是在日常开发中，我们需要将指令进行全局注册，以免重复代码的开发使用。
步骤以上面方法一致，区别在于，本次不在组件内部去声明指令，而是在main.js中去定义声明。

• 创建一个xxxxx.js文件用于声明指令的操作

// 引入vueUse 中的工具，用于懒加载实现
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  // 这里的install 是固定的语法，必须加上
  install(app) {
    app.directive('img-lazy', {
      //el为当前的DOM元素，binding为当前的指令配置对象
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // 当到达目标窗口时，isIntersecting 值为ture
          // console.log(isIntersecting)
          if (isIntersecting) {
            // 赋值，将图片地址赋值到img标签中的src中
            el.src = binding.value
            //useIntersectionObserver默认情况下是一直监听的，我们需要手动停止监听
            stop()
          }
        })
      }
    })
  }
}

• 在main.js 中导入并使用

import { lazyPlugin } from '@/directives'
app.use(lazyPlugin)