Vue3自定义指令的一些实践

自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑。简单来说就是对复杂的dom访问逻辑的封装，更偏向js的逻辑复用，这与组件的概念是不一样的

指令钩子

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

钩子函数中参数

• el: 指令绑定到的元素。这可以用于直接操作DOM。
• binding: 一个对象，包含以下属性
• value: 传递给指令的值。例如：v-my-directive='999'中，value===999
• arg: 传递给指令的参数 (如果有的话)。例如在 v-my-directive:loading 中，参数是 "loading"
• instance: 使用该指令的组件实例。可以用来访问组件的变量和方法
• oldValue: 之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用
• modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
• vnode：代表绑定元素的底层 VNode。
• prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

项目中的directive文件夹结构

在modules中编写自定义指令，index.js可以自动引入modules文件夹下所有的js文件并进行全局注册

/**
 * 全局指令注册
 */
 export default {
  async install(app) {
    const directives = import.meta.glob('./modules/*.js',{eager:true,import:'default'})
    for (const [key, value] of Object.entries(directives)) {
      // 拼接组件注册的 name
      const arr = key.split('/')
      const directiveName = arr[arr.length - 1].replace('.js', '')
      // 完成注册
      app.directive(directiveName, value.default)
    }
  }
}

业务场景

1. 图片懒加载：在用户无法看到图片时，不加载图片，在用户可以看到图片后加载图片

import { 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()
      }
    })
  }
}

2. 图片占位图

代码如下,headPortrait是一个变量,内容为占位图地址

<img src="@/assets/img/initImg.png" v-lazy:[headPortrait] />

// 图片占位符指令
app.directive('lazy', {
  mounted(el, binding) {
    setImg(el, binding)
  },
  updated(el, binding) {
    setImg(el, binding)
  }
})
async function setImg(el: HTMLImageElement, binding: any) {
  let imgURL = binding.arg;//获取图片地址
  if (imgURL) {
    let exist = await imageIsExist(imgURL);
    if (exist) {
      el.setAttribute('src', imgURL);
    }
  }
}
let imageIsExist = function (url: string) {
  return new Promise((resolve) => {
    let img = new Image();
    img.src = url;
    img.onload = function () {
      resolve(true);
    }
    img.onerror = function () {
      resolve(false);
    }
  })
}