Vue.js中Patch阶段对自定义指令生命周期钩子的触发顺序-Vue.js-PHP中文网

Vue.js Patch阶段指令钩子按DOM变更严格触发：created仅首次绑定时调用；mounted在节点插入后触发；updated在binding值变化且VNode复用时触发；componentUpdated在组件patch完成、DOM同步后触发；unmounted在节点移除后触发。

vue.js中patch阶段对自定义指令生命周期钩子的触发顺序

在 Vue.js 的 Patch 阶段（即虚拟 DOM 差分更新阶段），自定义指令的生命周期钩子会根据元素的新增、更新或移除状态被依次调用，其触发顺序严格遵循 DOM 节点的实际变更流程，而非模板书写顺序或响应式依赖顺序。

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 删除之后。

以一个使用 v-focus 指令的输入框为例（Vue 3）：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

v-if 控制显隐： false → true：created → mounted → updated true → false：unmounted
v-for 列表更新（key 稳定）：若某项数据变化导致 re-render，且该节点复用，则触发 updated（非 componentUpdated，除非整个组件 patch 结束）；若该项被删除，对应节点 unmounted。
动态指令参数变更：中 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 时序规则。