一文带你读懂vue3中directive指令的那些事

概述

vue3 中内置了很多丰富实用的指令，如v-show、v-if/v-else或v-model等，但是实际开发中可能我们还需要某些统一的处理，比如交互按钮的防抖，输入框的自动focus等，这时我们就可以通过vue3的directive注册自定义指令。

指令

指令钩子

vue3的自定义指令通常情况下是由一个包含类似组件生命周期钩子函数的对象，在DOM节点不同的时期，执行不同的钩子函数，而我们就可以在对应的钩子函数中接收到DOM节点、实例instance等待处理一些业务逻辑。

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

自定义防抖指令

定义指令

一般地，我们只需要在 mounted中或updated中去处理，一个防抖指令如下:

export default {
   
mounted(el, binding) {
   
  if (typeof binding.value !== 'function') {
   
    throw new Error("debounce指令的参数必须是一个函数，延时为1500ms")
    return
  }
  // 初始化时监听
  el.addEventListener('click', () => {
   
    if (!el.disabled) {
   
      el.disabled = true;
      const ti