Vue之v-model原理

目标：1、了解v-model的本质。2、了解v-model的实现原理。

我们知道Vue的核心特性之一是双向绑定，vue的响应式原理是实现了数据－>视图，接下来我们要学习 视图－>数据的原理。

v-model是一个指令，限制在<input>、<select>、<textarea>、components中使用，修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。它其实是一个语法糖，接下来我们就来分析 v-model 的实现原理。

为了更加直观，我们结合一个例子来分析：

v-model简单demo，在input标签上设置了v-model属性，绑定message

编译－parser：

        创建AST节点后会对节点做处理，其中对属性的处理会执行到processAttrs(el)。其中会遍历节点上的attrsList，拿到name属性，先判断name是否匹配模版指令的正则表达式(比如v-,:)，如果匹配到，给节点的hasBindings属性设为true(标志是动态节点)。

        然后通过parseModifiers(name)取到属性描述符 对象modifers。接下来会对指令进行判断命中'v-bind'？'v-on'？'v-model'。我们命中'v-model'，把'v-model'去掉，接着执行addDirective(el,name,rawName,value,arg,modifiers)，把我们传的参数添加到el.directives数组中。我们把v-model相关参数传入到el.directives中，为后续codegen准备。

编译-codegen：

        genData函数中会执行const dirs = genDirectives(el, state)(src/compiler/codegen/index.js)。

        1、遍历 el.directives,获取每一个指令对应的方法。首先他会拿前面的directives属性，如果存在，会开始为之后拼接做准备，拼接res = 'directives:['。我们遍历directives，const gen = state.directives[dir.name]，state是codegenState类(compiler/codegen/index.js)的一个实例，和编译息息相关，其中有一个directives实例对象，是由baseDirectives和options.directives做合并。options是和编译相关的配置(和编译平台有关)。state.directives最终拿到的是一个[model,text,html]，一个由三个对象组成的数组。在我们这里model对应一个model函数(platform/web/compiler/directives/model.js)。如果拿到了model函数，我们会执行这个model函数，needRuntime = !!gen(el, dir, state.warn) 。

        2、获取到指令方法就执行。model(ast节点,directives)函数，首先去取得value值，modifers修饰符，标签名等。接来下，根据tag(input)和type(textarea)做判断执行不同的逻辑，在我们的例子中会命中genDefaultModel(el, value, modifiers)。

        genDefaultModel方法，通过modifiers取到修饰符，根据修饰符的不同，影响event和valueExpression的值。对于我们的例子，event为input，valueExpression为$event.target.value。然后去执行 genAssignmentCode 去生成代码(src/compiler/directives/model.js)

genAssignmentCode

        genAssignmentCode，根据参数描述去生成代码。该方法首先对 v-model 对应的 value 做了解析，它处理了非常多的情况，对我们的例子，value 就是 messgae，所以返回的 res.key 为 null，然后我们就得到 ${value}=${assignment}，也就是 message=$event.target.value。然后我们又命中了 needCompositionGuard 为 true 的逻辑，所以最终的code为if($event.target.composing)return;message=$event.target.value。

code 生成完后，又执行了 2 句非常关键的代码：

关键代码

        这实际上就是 input 实现 v-model 的精髓，通过修改 AST 元素，给 el 添加一个 prop，相当于我们在 input 上动态绑定了 value，又给 el 添加了事件处理，相当于在 input 上绑定了 input 事件，其实转换成模板如下：

在input上动态绑定value，并给其添加了事件处理

        其实就是动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message 设置为目标值，这样实际上就完成了数据双向绑定了，所以说 v-model 实际上就是语法糖。

        再回到 genDirectives，它接下来的逻辑就是根据指令生成一些 data 的代码：

生成data代码

对我们的例子而言，最终生成的 render 代码如下：

最终生成的 render 代码

        关于事件的处理我们之前的章节已经分析过了，所以对于 input 的 v-model 而言，完全就是语法糖，并且对于其它表单元素套路都是一样，区别在于生成的事件代码会略有不同。

        v-model 除了作用在表单元素上，新版的 Vue 还把这一语法糖用在了组件上，接下来我们来分析它的实现。

组件：

为了更加直观，我们也是通过一个例子分析：

父组件引用child子组件的地方使用了v-model关联了数据message。而子组件定义了一个value的prop，并且在input事件的回调函数中，通过this.$emit('input', e.target.value)派发了一个事件

        可以看到，父组件引用 child 子组件的地方使用了 v-model 关联了数据 message；而子组件定义了一个 value 的 prop，并且在 input 事件的回调函数中，通过 this.$emit('input', e.target.value) 派发了一个事件，为了让 v-model 生效，这两点是必须的。

        接着我们从源码角度分析实现原理，还是从编译阶段说起，对于父组件而言，在编译阶段会解析 v-modle 指令，依然会执行 genData 函数中的 genDirectives 函数，接着执行 src/platforms/web/compiler/directives/model.js 中定义的 model 函数，并命中如下逻辑：

model 函数中命中的逻辑

genComponentModel 函数定义在 src/compiler/directives/model.js ：

 

 

genComponentModel函数

genComponentModel 的逻辑很简单，对我们的例子而言，生成的 el.model 的值为：

生成的 el.model 

那么在 genDirectives 之后，genData 函数中有一段逻辑如下：

genData

那么父组件最终生成的 render 代码如下：

 render 代码

        然后在创建子组件 vnode 阶段，会执行 createComponent 函数，它的定义在 src/core/vdom/create-component.js 中：

createComponent

其中会对 data.model 的情况做处理，执行 transformModel(Ctor.options, data) 方法：

transformModel

        transformModel 逻辑很简单，给 data.props 添加 data.model.value，并且给data.on 添加 data.model.callback，对我们的例子而言，扩展结果如下：

transformModel结果

其实就相当于我们在这样编写父组件：

相当于这样

        子组件传递的 value 绑定到当前父组件的 message，同时监听自定义 input 事件，当子组件派发 input 事件的时候，父组件会在事件回调函数中修改 message 的值，同时 value 也会发生变化，子组件的 input 值被更新。

        这就是典型的 Vue 的父子组件通讯模式，父组件通过 prop 把数据传递到子组件，子组件修改了数据后把改变通过 $emit 事件的方式通知父组件，所以说组件上的 v-model 也是一种语法糖。

        另外我们注意到组件 v-model 的实现，子组件的 value prop 以及派发的 input 事件名是可配的，可以看到 transformModel 中对这部分的处理：

子组件的 value prop 以及派发的 input 事件名是可配的

        也就是说可以在定义子组件的时候通过 model 选项配置子组件接收的 prop 名以及派发的事件名，举个例子：

子组件修改了接收的 prop 名以及派发的事件名，然而这一切父组件作为调用方是不用关心的，这样做的好处是我们可以把 value 这个 prop 作为其它的用途。

总结

        那么至此，v-model 的实现就分析完了，我们了解到它是 Vue 双向绑定的真正实现，但本质上就是一种语法糖，它即可以支持原生表单元素，也可以支持自定义组件。在组件的实现中，我们是可以配置子组件接收的 prop 名称，以及派发的事件名称。

作者：LoveBugs_King
链接：https://www.jianshu.com/p/8e2b5e04a1f7 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。