什么是自定义指令？

Vue 自定义指令是用户定义的特定的 DOM 操作逻辑，用于在组件的模板中添加特定的行为或操作 DOM 元素。自定义指令可以是全局或局部的。

自定义指令的作用

  • 封装 DOM 操作逻辑，减少重复代码。
  • 操作特定的元素行为，如自动聚焦、拖拽、事件监听等。
  • 提升代码可读性，将复杂 DOM 操作抽象为一个简单的指令。

自定义指令的定义

全局指令

使用 Vue.directive 定义一个全局指令：

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

使用

<input v-focus>

局部指令

在组件的 directives 选项中定义：

export default {
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      }
    }
  }
};

使用

<input v-focus>

指令的生命周期钩子

自定义指令有几个钩子函数，可以在不同阶段进行操作：

钩子函数 触发时机 说明
bind 指令第一次绑定到元素时调用 只触发一次，可以进行初始化。
inserted 被绑定元素插入到父节点时调用 DOM 已插入，可以操作 DOM。
update 所在组件的 VNode 更新时调用 可能会多次触发。
componentUpdated 组件的 VNode 及其子节点更新后调用 确保 DOM 已完成更新。
unbind 指令解绑时调用 清理资源，防止内存泄漏。

示例：

Vue.directive('demo', {
  bind(el) {
    console.log('bind');
  },
  inserted(el) {
    console.log('inserted');
  },
  update(el) {
    console.log('update');
  },
  componentUpdated(el) {
    console.log('componentUpdated');
  },
  unbind(el) {
    console.log('unbind');
  }
});

指令钩子参数

指令钩子函数接收以下参数：

  • **el**：绑定的 DOM 元素。
  • **binding**：包含指令相关信息的对象。
    • value：传递给指令的值。
    • oldValue：旧的值（update 时可用）。
    • arg：指令的参数。
    • modifiers：指令的修饰符。
  • **vnode**：Vue 编译生成的虚拟节点。

示例：

Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value || 'red';
  }
});

修饰符

修饰符用于对指令进行特定行为的控制：

示例：防抖处理

Vue.directive('resize', {
  inserted(el, binding) {
    if (binding.modifiers.debounce) {
      let timeout;
      window.addEventListener('resize', () => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          console.log('Debounced resize event');
        }, 300);
      });
    }
  }
});

使用：

<div v-resize.debounce></div>

常见应用场景

  • 自动聚焦：v-focus
  • 拖拽功能：v-drag
  • 点击外部关闭：v-click-outside
  • 节流与防抖：v-throttle、v-debounce
  • 权限控制：v-permission

注意事项

  • 在 unbind 中清理事件监听，避免内存泄漏。
  • 自定义指令主要用于操作 DOM，逻辑复杂时考虑使用组件。
  • 适合一些全局通用的逻辑，避免过度滥用。

总结

  • 全局/局部 自定义指令
  • 生命周期钩子：bind、inserted、update、componentUpdated、unbind
  • 参数：el、binding、vnode
  • 应用场景：自动聚焦、拖拽、事件监听等

Vue 自定义指令为开发者提供了更灵活的 DOM 操作，在一些复杂场景下，能显著提高开发效率和代码可维护性。