vue指令实现原理

Vue 指令的实现原理

Vue 指令的核心是通过自定义属性对 DOM 进行底层操作，其实现涉及编译、绑定和更新三个阶段。

指令的编译阶段

Vue 在模板编译过程中会解析指令。通过正则匹配模板中的 v- 前缀属性，将其转换为指令对象。例如 v-model 会被解析为：

{
  name: 'model',
  value: 'message',
  modifiers: {} // 修饰符（如 .lazy）
}

指令的绑定阶段

指令对象通过 bind 钩子与 DOM 元素绑定。Vue 会创建一个指令的实例，并调用其 bind 方法完成初始设置。例如 v-show 的实现：

bind(el, binding) {
  el.style.display = binding.value ? '' : 'none'
}

指令的更新阶段

当指令依赖的数据变化时，会触发 update 钩子。Vue 通过依赖追踪系统自动检测变化，例如 v-model 的双向绑定：

update(el, binding) {
  el.value = binding.value
  // 同时监听 input 事件反向更新数据
}

自定义指令示例

注册一个自定义指令 v-focus：

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

内置指令的底层机制

• v-if/v-show：v-if 通过销毁/重建 DOM 节点实现，v-show 切换 CSS 的 display 属性
• v-for：基于 key 的 Diff 算法优化列表渲染
• v-bind：动态更新 DOM 属性，支持 .sync 修饰符实现双向绑定
• v-on：使用 addEventListener 实现事件绑定，支持事件修饰符（如 .stop）

指令与响应式系统的结合

指令通过 Watcher 监听数据变化。当指令表达式的值变化时，Vue 的响应式系统会触发指令的 update 方法，例如：

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