Vue.js Patch阶段指令钩子按DOM变更严格触发：created仅首次绑定时调用；mounted在节点插入后触发；updated在binding值变化且VNode复用时触发；componentUpdated在组件patch完成、DOM同步后触发；unmounted在节点移除后触发。
在 Vue.js 的 Patch 阶段（即虚拟 DOM 差分更新阶段），自定义指令的生命周期钩子会根据元素的新增、更新或移除状态被依次调用，其触发顺序严格遵循 DOM 节点的实际变更流程，而非模板书写顺序或响应式依赖顺序。
指令钩子在 Patch 中的触发时机
Vue 2 和 Vue 3 对指令钩子的调用逻辑略有差异，但核心原则一致：钩子执行与真实 DOM 操作强绑定。Patch 过程中，每个指令实例会按以下逻辑响应：
- bind / created（Vue 2）或 created（Vue 3）：仅在指令首次绑定到元素时调用，发生在 VNode 创建后、DOM 插入前（Vue 2）或组件 setup 后、VNode 挂载前（Vue 3）；Patch 阶段不触发此钩子。
- inserted / mounted（Vue 2 / Vue 3）：在对应 DOM 元素被插入父容器后立即触发；Patch 中若节点为新挂载（如 v-if 从 false → true），则触发。
-
update / updated（Vue 2 / Vue 3）：当组件重新渲染且该指令所在 VNode 复用（sameVNode 判断为 true）、但 binding 值发生变化时触发；注意：仅当
v-xxx的参数、修饰符或值表达式实际变更才会进入 update 流程。 - componentUpdated / updated（Vue 2 / Vue 3）：在所在组件的整个 patch 完成、所有子节点更新完毕、DOM 已同步后触发；它比 update 更晚，可安全访问更新后的 DOM。
- unbind / unmounted（Vue 2 / Vue 3）：当指令所在元素被完全移除（如 v-if 从 true → false，且节点被销毁）时触发；发生在 DOM 删除之后。
常见 Patch 场景下的钩子执行顺序示例
以一个使用 v-focus 指令的输入框为例（Vue 3）：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
-
v-if 控制显隐：
false → true：created → mounted → updatedtrue → false：unmounted -
v-for 列表更新（key 稳定）：
若某项数据变化导致 re-render，且该
<input v-focus>节点复用，则触发 updated（非 componentUpdated，除非整个组件 patch 结束）； 若该项被删除，对应节点 unmounted。 -
动态指令参数变更：
<div v-my-directive:arg="value"> 中 <code>arg或value改变 → 触发 update（Vue 2）或 updated（Vue 3）。注意事项与易混淆点
理解 Patch 阶段指令行为需注意几个关键事实：
立即学习“前端免费学习笔记（深入）”；
- 指令钩子不参与响应式追踪，binding.value 变化不会自动触发 update，必须通过 Vue 的 re-render 机制使 VNode 更新，才可能进入 update/updated 流程。
-
mounted 和 updated 不保证 DOM 已完成样式计算或布局；如需获取准确尺寸，应配合
nextTick或requestAnimationFrame。 - Vue 3 中
beforeMount/beforeUpdate等组件级钩子与指令钩子无直接调用关系；指令钩子独立于组件生命周期执行。 - 多个指令在同一元素上时，钩子按模板中声明顺序触发（从左到右），但每个钩子内部仍遵循上述 Patch 时序规则。
