v-model 的语法糖转换发生在编译时，经 parse（保留 v-model 指令）、transform（转为属性绑定+事件监听）、generate（生成 render 函数）三阶段完成，运行时仅执行无 v-model 的编译结果。
v-model 的语法糖转换发生在 Vue 编译器的 编译时（compile time），不是运行时动态处理的。整个过程由解析（parse）、转换（transform）、生成（generate）三阶段完成，核心是把模板中直观的 v-model 指令，提前转为标准的属性绑定 + 事件监听组合。
1. parse 阶段：保留原始指令结构
编译器首先将 template 字符串解析成 AST（抽象语法树）。此时带有 v-model 的节点，其 props 数组里仍原样存着一个 v-model 指令对象，尚未展开。
2. transform 阶段：关键转换发生地
这是语法糖“落地”的核心环节。transform 函数遍历 AST 节点，识别 v-model 指令，并根据上下文（如是否为表单元素、是否为自定义组件）进行差异化处理：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 对原生
<input>、<textarea></textarea>等：转为:value+@input（Vue 2）或:modelValue+@update:modelValue（Vue 3） - 对自定义组件：默认使用
:modelValue和@update:modelValue；若组件声明了model选项（Vue 2）或modelValue+update:modelValue的 prop/event 映射（Vue 3），则按配置替换 key 和事件名 - 转换结果写入节点的
codegenNode属性中，此时 AST 已不含v-model，只含展开后的绑定和事件
3. generate 阶段：产出可执行 render 函数
基于已转换的 AST，generate 将其序列化为字符串形式的 JavaScript render 函数。该函数在运行时执行，创建虚拟 DOM。由于 AST 中已无 v-model，生成的 render 函数直接包含 modelValue 属性和 onUpdate:modelValue 事件处理器（Vue 3）或类似结构（Vue 2）。
4. 运行时只是执行，不参与转换逻辑
浏览器中执行 render 函数时，只是照着编译结果创建 vnode，把 modelValue 当作普通 prop 传入，把 onUpdate:modelValue 当作事件监听器注册。v-model 的“魔法”已在编译阶段静态完成，运行时完全感知不到原始指令的存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
