Vue渲染器通过解析vnode.dirs在patch关键节点调用指令钩子，钩子作为“旁观者”不参与diff，仅响应DOM状态变化；其触发依赖vnode类型一致及绑定值变更，且Vue3统一命名（beforeMount/mounted等）更清晰。
渲染器本身不直接处理自定义指令的逻辑，而是通过解析 vnode 中的 vNode.dirs 列表，在 patch 流程的关键节点主动调用对应指令的钩子函数。这些钩子是“旁观者”，不参与 diff 计算，只响应 DOM 状态变化。
指令钩子如何被渲染器识别和调用
Vue 渲染器在 patch 阶段会检查当前 vnode 是否携带 dirs 数组（即注册的自定义指令）。若存在，就按预设时机逐个触发已定义的钩子函数。这个过程独立于 props、class、style 等 diff 判定，仅依赖 vnode 类型是否一致（sameVNodeType）以及指令是否需要更新（如绑定值变化）。
- 指令定义不会改变 vnode 结构或 key，因此不影响 diff 路径选择
- 即使指令参数未变，只要组件重渲染导致 vnode 重建，
beforeMount和mounted仍会在首次挂载时执行 - 参数变化（如
v-focus="active"中active由 true → false）会触发beforeUpdate和updated，但不会引发强制重绘或 key 替换
钩子在 patch 各阶段的实际触发顺序（Vue 3）
以一个带 v-focus 指令的 <input> 元素为例，完整生命周期中钩子按如下时序被调用：
- 首次挂载：beforeMount → mounted
- 响应式更新：beforeUpdate → （子节点 patch 完成）→ updated
- 卸载销毁：beforeUnmount → unmounted
注意：beforeMount 在 vnode 创建后、子节点 patch 前执行；mounted 在真实 DOM 插入父容器后执行；updated 保证整个子树 DOM 已同步完成，适合做依赖布局的操作。
Vue 2 与 Vue 3 钩子命名和语义差异
Vue 2 使用 bind/inserted/update/componentUpdated/unbind，而 Vue 3 统一为生命周期对齐的命名（beforeMount、updated 等），语义更清晰且与组件钩子保持一致。
-
inserted（Vue 2）≈mounted（Vue 3），但 Vue 3 的mounted更严格保证 DOM 已挂载到文档流 -
componentUpdated（Vue 2）≈updated（Vue 3），两者都表示当前 vnode 及其全部子 vnode 已完成 patch - Vue 3 移除了
bind和inserted的分离设计，避免开发者混淆“vnode 创建”和“DOM 插入”两个阶段
实际开发中的关键注意事项
指令钩子不是魔法，它们的执行高度依赖 patch 流程的稳定性。几个容易踩坑的点需特别留意：
- 不要在
beforeUpdate或updated中修改响应式数据，否则可能触发无限更新循环 - 涉及 DOM 尺寸或位置的操作（如 focus、scrollIntoView），应放在
mounted或updated，而非beforeMount - 清理副作用（如定时器、事件监听）必须在
unmounted（Vue 3）或unbind（Vue 2）中执行，否则会造成内存泄漏 - 指令钩子接收的
el是真实 DOM 元素，但不能假设它一定有父节点或已渲染可见——尤其在 SSR 或 Suspense 场景下
