Vue3中withDirectives是运行时API，用于将指令元信息数组附加到VNode的dirs属性，供渲染器在挂载/更新时按生命周期触发对应钩子，实现声明式、可复用的指令管理。
Vue3 的编译结果中不会直接出现 _withDirectives 这个函数名，它也不是编译器生成的“默认调用”。真正被编译器注入的是 withDirectives —— 这是一个运行时 API，由 Vue 提供、在 render 函数中显式调用，用于给 VNode 动态附加指令。所谓“编译结果使用 withDirectives”，本质是：当模板里写了自定义指令（如 v-focus），Vue 编译器会把该指令的绑定信息收集起来，并在生成的 render 函数中，用 withDirectives() 包裹对应的 VNode。
编译阶段：把 v-directive 转成指令描述数组
Vue3 模板编译器（compiler-dom）在 transform 阶段识别所有指令属性，提取出：
- 指令对象（通过
resolveDirective查找或内联定义） - 绑定值（
value）、参数（arg）、修饰符（modifiers） - 作用位置（比如是绑定在
<input>上，还是插槽内容上）
例如：<input v-focus:select.prevent> 会被解析为：
[[focusDirective, undefined, 'select', { prevent: true }]]
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
运行时阶段：withDirectives 封装 VNode
withDirectives 是一个纯函数，接收两个参数：
- 原始 VNode（比如
h('input')） - 指令元信息数组（每个元素是
[directive, value, arg, modifiers]）
它返回一个新 VNode，其 dirs 属性被赋值为该数组。这个 dirs 字段是 Vue 渲染器（renderer）后续执行指令钩子的关键依据。注意：withDirectives 不执行任何逻辑，只做数据标记。
挂载/更新时：渲染器按需触发指令钩子
当虚拟节点被挂载（mount）或更新（patch）时，渲染器会检查 VNode 是否有 dirs 字段：
- 有，则遍历每个指令项，根据当前生命周期（
beforeMount、mounted等）调用对应钩子 - 钩子函数接收
el（真实 DOM 元素）、binding（含 value/arg/modifiers 等）等参数 - 整个过程与组件更新流程解耦，但共享同一套响应式和调度系统
为什么不用编译成 inline 函数调用？
因为指令行为是可复用、可组合、可动态决定的：
- 同一个指令可能在多个地方以不同参数使用（
v-permission="['user:add']vsv-permission="['user:del']"） - 指令本身可能来自异步加载的模块（需运行时 resolve）
- 需要统一管理生命周期（比如 unmount 时自动清理事件监听器）
硬编码调用会破坏灵活性和可维护性。withDirectives 提供了一层声明式抽象，让指令成为 VNode 的“元数据”，而非侵入性的副作用逻辑。
