Vue自定义指令嵌入虚拟DOM的patch过程，按VNode生命周期阶段精准触发：bind（创建后）、inserted（插入后）、update（值变化时）、componentUpdated（DOM更新后）、unbind（卸载前）。
Vue.js 渲染流水线中，自定义指令不是在模板解析时立即执行，而是嵌入在虚拟 DOM 的 patch 过程中，随节点的创建、插入、更新、销毁等阶段被精准触发。它的执行时机与 Vue 的响应式更新机制深度耦合，而非简单地“随数据变化就运行”。
指令钩子绑定在 VNode 生命周期关键节点
Vue 在 diff 和 patch 阶段会遍历新旧 VNode，并在特定节点操作环节调用对应指令钩子。这些钩子本质上是挂载在 VNode 上的回调函数，在虚拟 DOM 操作的不同阶段被统一调度：
-
bind：在 VNode 创建完成、但 DOM 尚未挂载时触发（对应 patch 流程中的
create阶段前）。此时 el 是真实 DOM 元素，但可能还未插入文档，适合一次性初始化（如添加 class、设置初始样式） -
inserted：在 VNode 对应的真实 DOM 被
appendChild或insertBefore插入父容器后立即触发（对应insert钩子）。此时元素已可访问 offsetHeight、getBoundingClientRect，也支持 focus()、scrollIntoView() 等需布局生效的操作 - update：在组件 re-render 后、新旧 VNode diff 完成、且该指令所在节点未被复用（即非 sameVNode）时调用；若节点复用，则仅在 binding.value 变化时触发（Vue 内部做了浅比较）。注意：它不保证 DOM 已重绘，只表示响应式值已更新
- componentUpdated：在当前组件及其所有子组件的 VNode 全部 patch 完毕、DOM 更新完成、浏览器重排重绘可能发生之后触发。适合依赖完整 DOM 结构或第三方库（如 Chart.js）的同步初始化
-
unbind：在 VNode 被卸载、真实 DOM 被移除前触发（对应
destory钩子）。必须在此清理事件监听器、定时器、IntersectionObserver 实例等，防止内存泄漏
全局指令与局部指令的注册不影响执行时机
无论是通过 Vue.directive() 全局注册，还是在组件 directives 选项中局部注册，指令的执行逻辑完全由 Vue 渲染器统一调度。区别仅在于作用域和优先级：
- 全局指令对所有组件可用，但会被同名局部指令覆盖
- 局部指令仅在当前组件内生效，且其钩子函数中
this指向当前组件实例（Vue 2），便于访问data、methods等 - 指令定义对象本身不参与响应式系统，但
binding.value是响应式的，其变化会驱动update和componentUpdated
函数式写法本质是 update 钩子的语法糖
当使用简写形式定义指令（如 Vue.directive('focus', el => el.focus())），Vue 会自动将其包装为仅含 update 钩子的对象。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 它不会在元素插入时自动聚焦（缺少
inserted），除非手动判断首次调用 - 每次组件更新都会执行该函数，即使
v-focus没有绑定值，也会传入undefined - 无法访问
binding.arg、modifiers等元信息，也不支持unbind清理逻辑
实际开发中容易误判的时机陷阱
很多问题源于对钩子触发条件的误解：
-
inserted不等于“页面可见”——元素可能被v-if控制，也可能位于display: none容器中，此时getBoundingClientRect()返回全零，需结合offsetParent或IntersectionObserver判断可见性 -
update不代表 DOM 已更新——它发生在 patch 过程中，此时浏览器尚未重绘，el.offsetWidth可能仍是旧值；如需读取最新尺寸，应使用nextTick或requestAnimationFrame - 指令不会响应
key变更导致的节点重建——若元素因key改变被全新创建，bind和inserted会再次触发，但旧节点的unbind未必及时执行（取决于 diff 策略）
