vue源码解读--v-model

本节的示例代码如下

$\bullet$ parse

在parse阶段会对template对应的字符串进行遍历，当匹配到<input...>开始标签时，textEnd大于0则向下走获取到中间插值部分并最后调用chars生成一个文本节点，但是由于其是插值，故type为2

接下来对input进行解析，由于input是单标签，故将直接走closeElement调用processElement对标签进行加工，函数processAttrs如下

框红的位置即对v-module进行处理，调用addDirective

可以看到，该函数向el节点上添加了directives，即

$\bullet$ codegen

我们知道在codegen阶段最关键的就是gendata函数，该函数将对标签元素上定义的属性转为code。在当前存在v-model的前提下将执行genDirectives

gen来自于state.directives,而state则是CodegenState类的实例

extend是用于将两个对象进行合并,options则是在调用编译入口函数compileToFunctions传入，故实际上options来源于

即

故gen拿到的实际上是model函数

可以看出，v-model可以用在组件上，也可以用在下拉框、单选框、输入框、文本框上。对于我们当前示例，则进入框红的逻辑中

从框红的位置可以看出，它实际上是向元素节点上手动添加了props和events

addProp

src\compiler\helpers.js

addHandler则是我们在分析事件时的函数，它会向节点上添加events属性，故我们可以推断出，它实际上是手动向input监听了change或input事件

返回到gendata过程，此时的el节点如下

代码向下，则会判断events并进行事件的添加，这和上一节分析事件的流程是一样的，故不作分析

故，v-model实际上就是一个语法糖，它手动的向我们的input标签添加了props和event