vue3 响应式 invokeVNodeHook invokeDirectiveHook区别是什么

简明区别

• 作用对象

• invokeVNodeHook：触发“VNode 级”钩子（如 onVnodeBeforeMount/Mounted/BeforeUpdate/Updated/BeforeUnmount/Unmounted），来源是 VNode 的 props。

• invokeDirectiveHook：触发“指令级”钩子（如 created/beforeMount/mounted/beforeUpdate/updated/beforeUnmount/unmounted），来源是指令对象本身。

• 触发场景

• invokeVNodeHook：组件或元素在挂载、更新、卸载等阶段，按 VNode 生命周期点触发。

• invokeDirectiveHook：只有当 VNode 上存在 dirs（指令列表）时，在对应阶段逐个指令触发。

• 参数与上下文

• invokeVNodeHook(fn, instance, vnode[, prev])：以组件实例为当前上下文，传入当前/旧 VNode。

• invokeDirectiveHook(vnode, prevVNode, instance, name)：内部会构造指令 binding（value、oldValue、arg、modifiers、instance、dir），并把 el/vnode/prevVNode 等传给指令的对应钩子。

• 调度/时机控制

• 两者都会在需要时使用 queuePostRenderEffect 把部分钩子放到渲染后执行（如 mounted/unmounted），并在调用前后结合 pauseTracking/resetTracking 与 setCurrentInstance 做隔离与上下文设置（避免误收集依赖、绑定正确实例）。

• 错误与异步

• 两者调用路径都会走 callWithAsyncErrorHandling，统一捕获/处理同步与异步错误。