vue指令实现原理

Vue 指令的实现原理

Vue 指令的核心是通过自定义属性（如 v-model、v-if）扩展 HTML 功能，其实现依赖于编译、响应式系统和 DOM 操作。以下是关键实现机制：

编译阶段解析指令

Vue 模板编译时将指令解析为 AST（抽象语法树）。例如 v-if="show" 会被解析为：

{
  attrs: [{ name: 'v-if', value: 'show' }],
  directives: [{ name: 'if', expression: 'show' }]
}

编译器将模板中的指令标记为特殊节点，为后续生成渲染函数做准备。

生成渲染函数

编译后的 AST 转换为可执行的渲染函数。例如 v-if 会被转换为条件判断：

function render() {
  return _c('div', [
    show ? _c('p') : _e()
  ])
}

其中 _c 创建节点，_e 创建空节点。

指令的生命周期钩子

指令通过对象定义钩子函数，在特定时机执行：

Vue.directive('focus', {
  bind(el, binding) { /* 初始化 */ },
  inserted(el) { el.focus() },
  update() { /* 数据更新 */ },
  unbind() { /* 清理 */ }
})

钩子与虚拟 DOM 的生命周期（如 created、mounted）关联。

响应式依赖追踪

指令的表达式（如 v-show="isVisible"）会触发响应式依赖收集。当 isVisible 变化时，指令的 update 钩子被调用，更新 DOM：

new Watcher(vm, 'isVisible', () => {
  el.style.display = vm.isVisible ? '' : 'none'
})

原生 DOM 操作

指令最终通过原生 DOM API 操作元素。例如 v-show 的实现：

function updateShow(el, value) {
  el.style.display = value ? '' : 'none'
}

复杂指令如 v-model 可能组合事件监听（addEventListener）和属性绑定（el.value）。

自定义指令注册

通过 Vue.directive() 全局注册或组件 directives 选项局部注册：

directives: {
  pin: {
    inserted(el, binding) {
      el.style.position = 'fixed'
      el.style[binding.arg] = '10px'
    }
  }
}

指令与虚拟 DOM 协同

指令在虚拟 DOM 的 patch 阶段生效。当新旧 VNode 对比时，指令的 update 钩子会根据数据变化执行差异化 DOM 操作，避免全量更新。

通过以上机制，Vue 指令实现了声明式 DOM 操作与响应式数据的无缝结合。