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 操作与响应式数据的无缝结合。
