【Vue原理】VModel - 源码版 之 表单元素绑定流程

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】VModel - 源码版 之 表单元素绑定流程

今天讲解 v-model 的源码版。首先，兄弟，容我先说几句

v-model 涉及源码很多，篇幅很长，我都已经分了上下 三篇了，依然这么长，但是其实内容都差不多一样，但是我还是毫无保留地给你了。你知道我这篇文章写了多久，一个多星期啊，不是研究多久啊，是写啊写啊，不停地修修改改，一直在想如何才能讲明白

如果你做好了十足的学习准备，会对你事半功倍，如果你只是看看，请看白话版吧，不然估计会越看越烦…

如果你看过白话版，估计你会了解今天内容的大概，也能很快就入戏

今天讲解不同表单元素的Vue是如何处理的，表单元素有

input、textarea、select、checkbox、radio 五大种

所以，我们把每个表单元素当做一个模块，然后每个模块解决三个问题的流程，来开始我们今天的表演

1、v-model 如何绑定表单值

2、v-model 如何绑定事件

4、v-model 如何双向更新

TIP

下面所有涉及到的源码，为了方便理解，都是简化过的，因为源码太长，所以只保留主要思想，去掉了很多兼容处理以及错误处理

---

v-model 指令的处理

我们现在假设模板的解析已经到了 解析 v-model 的部分…

Vue 会调用 model 方法 来解析 v-model ，这个方法里面，针对不同的表单元素，再调用不同的专属方法进行深度解析

function model(el, dir) {    

    var value = dir.value;     
    var tag = el.tag;    
    var type = el.attrsMap.type;    

    if (tag === 'select') {
        genSelect(el, value);
    } 
    else if (tag === 'input' && type === 'checkbox') {
        genCheckboxModel(el, value);
    } 
    else if (tag === 'input' && type === 'radio') {
        genRadioModel(el, value);
    } 
    else if (tag === 'input' || tag === 'textarea') {
        genDefaultModel(el, value);
    }
}

你也看到了，上面每种表单元素都会使用一个方法来特殊照顾，不过这些方法，作用大致一样

1、给表单元素设置绑定值

2、给表单元素设置事件及回调

所以这里，我们把方法的都设计到的方法以及流程说一下

插播上面的el 是什么？

el 是 ast，而我的理解就是解析模板后，用树结构来表示某个dom节点，这里先不用深究，你就只要知道他是保存解析模板后所有的数据，包括你绑定的事件，绑定的指令，绑定的属性等等，一张图看下

下面所有的处理都是以 el 为基础的

表单元素设置绑定值

什么叫设置绑定值？

首先，比如你给表单元素设置 v-model =“name”，name 是 内部数据吧，所以要把 name 和 表单元素 两个紧紧绑定起来，方便后面进行双向更新

这里讲的是每个表单元素绑定值的流程

他们都会调用 addProp 去保存绑定的属性 然后 绑定属性，流程一样，所以提出来讲，但是具体绑定什么属性，每种元素都不尽相同，在下面表单元素模块会详解

1、调用 addProp，把 value 添加进 el.p