Vue 3自定义指令开发的相关总结

Vue 3自定义指令是Vue.js提供的一种扩展语法，可以用于对普通HTML标签的属性进行自定义绑定和操作。Vue 3的自定义指令与Vue 2的自定义指令相比，有较大的变化，需要开发者重新学习和掌握。

Vue 3自定义指令的基本语法

Vue 3中定义自定义指令的方式如下：

const directive = {
  // directive 的钩子函数，bind 和 update 在 Vue 3 中都是一样的
  mounted(el, binding, vnode) {
    // 操作 DOM
  },
  updated(el, binding, vnode) {
    // 操作 DOM
  }
}

const app = createApp({
  directives: {
     directiveName: directive
  }
})

• directiveName：指令的名称，用于在模板中作为v-的前缀进行绑定。
• directive：指令的定义对象，包含钩子函数和配置选项等属性。

Vue 3自定义指令的钩子函数

一个 Vue 3 的自定义指令主要包含以下四个生命周期钩子函数：

1. beforeMount：在绑定元素的父组件被挂载之前调用，仅在一次性缓存块中可用。
2. mounted：在绑定元素的父组件被挂载后调用。
3. beforeUpdate：在更新绑定元素之前调用，但是该指令的值已经改变了。
4. updated：在组件的 VNode 更新后调用，但是可能在子组件 VNode 更新之前调用。

Vue 3自定义指令的示例

实现一个水印指令

const watermarkDirective = {
  mounted(el, binding) {
    // 获取指令绑定的值
    const watermarkText = binding.value

    // 创建DOM节点，为水印文本添加样式
    const waterMarkText = document.createElement('div')
    waterMarkText.textContent = watermarkText
    waterMarkText.style.position = 'absolute'
    waterMarkText.style.top = '50%'
    waterMarkText.style.left = '50%'
    waterMarkText.style.fontSize = '50px'
    waterMarkText.style.color = 'rgba(0, 0, 0, 0.1)'
    el.appendChild(waterMarkText)
  },
  updated(el, binding) {
    // 实现水印的更新
    const watermarkText = binding.value
    el.childNodes.forEach(node => {
      if (node.nodeType === 1 && node.tagName === 'DIV') {
        node.textContent = watermarkText
      }
    })
  }
}

const app = createApp({
  directives: {
    watermark: watermarkDirective
  },
  data() {
    return {
      watermarkText: 'Custom Watermark'
    }
  },
  mounted() {
    // 修改水印的值
    setInterval(() => {
      this.watermarkText = `Custom Watermark ${Date.now()}`
    }, 3000)
  }
})

这个例子实现了一个水印指令，适用于给页面添加水印。在mounted钩子函数中创建了一个新的div，并添加到element中。在updated钩子函数中则更新了已有的水印。

实现一个图片懒加载指令

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <!-- 使用img标签并将v-lazy指令绑定到img的src属性上 -->
      <img :src="item.img" v-lazy="item.src" >
    </li>
  </ul>
</template>

<script>
// 定义一个图片懒加载指令
const LazyLoadImageDirective = {
  mounted(el, binding) {
    // 获取图片的data-src属性值
    const imgSrc = el.getAttribute('data-src')

    // 判断图片是否在可视区域内，并进行加载
    function loadImage() {
      const rect = el.getBoundingClientRect()
      if (rect.top < window.innerHeight) {
        el.setAttribute('src', imgSrc)
        el.removeAttribute('data-src')
        window.removeEventListener('scroll', loadImage)
      }
    }

    // 挂载到IntersectionObserver对象上，当图片进入可视区域时触发回调函数
    const io = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          loadImage()
          io.unobserve(entry.target)
        }
      })
    })

    io.observe(el)

    // 监听浏览器的滚动事件，当浏览器滚动时，
    // 如果图片出现在可视区域内，则加载图片并停止监听滚动事件
    window.addEventListener('scroll', loadImage)
  },
  updated(el, binding) {
    // 初始化后再次更新需要执行mounted方法中的loading动作
    window.addEventListener('scroll', loadImage)
  }
}

export default {
  directives: {
    lazy: LazyLoadImageDirective
  },
  data() {
    return {
      list: [
        {
          img: 'https://picsum.photos/200',
          src: 'https://picsum.photos/1000'
        },
        {
          img: 'https://picsum.photos/201',
          src: 'https://picsum.photos/1001'
        },
        {
          img: 'https://picsum.photos/202',
          src: 'https://picsum.photos/1002'
        }
      ]
    }
  }
}
</script>

这个例子实现了一个图片懒加载指令，可以在图片进入浏览器可视区域时进行加载。该指令使用了浏览器的IntersectionObserver API来观察图片是否进入了可视区域。当图片进入可视区域时，就会执行加载并停止监听滚动事件。代码使用了getAttribute和setAttribute方法来获取和设置DOM属性的值，以及使用了IntersectionObserver的unobserve方法来停止观察已经加载的图片。