文章预览
前言 我们每天都在用 v-model ，并且大家都知道在vue3中 v-model 是 :modelValue 和 @update:modelValue 的语法糖。那你知道 v-model 指令是如何变成组件上的 modelValue 属性和 @update:modelValue 事件呢？将 v-model 指令转换为 modelValue 属性和 @update:modelValue 事件这一过程是在编译时还是运行时进行的呢？ 先说结论 下面这个是我画的处理 v-model 指令的完整流程图： 首先会调用 parse 函数将template模块中的代码转换为AST抽象语法树，此时使用 v-model 的node节点的props属性中还是 v-model 。接着会调用 transform 函数，经过 transform 函数处理后在 node 节点中多了一个 codegenNode 属性。在 codegenNode 属性中我们看到没有 v-model 指令，取而代之的是 modelValue 和 onUpdate:modelValue 属性。经过 transform 函数处理后已经将 v-model 指令编译为 modelValue 和 onUpdate:modelValue 属性，此时还是AST抽象语法树。所
………………………………
