vue指令如何实现

Vue 指令的基本实现方式

Vue 指令通过 Vue.directive 方法注册，接受一个指令名和一个定义对象。定义对象包含钩子函数（如 bind、inserted、update 等），用于在不同阶段操作 DOM。

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

常用钩子函数说明

• bind：指令第一次绑定到元素时调用，适合初始化设置。
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在）。
• update：所在组件的 VNode 更新时调用，可能发生在子 VNode 更新前。
• componentUpdated：所在组件及子 VNode 全部更新后调用。
• unbind：指令与元素解绑时调用，适合清理工作。

指令参数传递

指令可以通过值或表达式接收参数。binding.value 获取传递的值，binding.expression 获取原始表达式。

Vue.directive('color', {
  bind: function (el, binding) {
    el.style.color = binding.value
  }
})

使用指令时传递参数：

<div v-color="'red'">文字颜色变红</div>

动态指令参数

指令参数可以是动态的，通过方括号语法实现：

<div v-demo:[arg]="value"></div>

在钩子函数中通过 binding.arg 获取动态参数。

对象字面量传递多参数

指令值支持对象字面量，便于传递多个参数：

<div v-demo="{ color: 'white', text: 'hello' }"></div>

通过 binding.value.color 和 binding.value.text 访问。

自定义指令的复用

将常用指令封装为插件，通过 Vue.use() 全局注册：

const MyPlugin = {
  install(Vue) {
    Vue.directive('focus', {
      inserted: function (el) {
        el.focus()
      }
    })
  }
}
Vue.use(MyPlugin)

指令与组件通信

指令可通过 vnode.context 访问组件实例，调用组件方法或修改数据：

Vue.directive('alert', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', () => {
      vnode.context[binding.expression]()
    })
  }
})

性能优化建议

避免在 update 钩子中进行高开销操作。使用 binding.oldValue 比较新旧值，必要时才更新 DOM：

Vue.directive('optimized', {
  update: function (el, binding) {
    if (binding.value !== binding.oldValue) {
      // 执行更新逻辑
    }
  }
})