前言
今天介绍Vue.js中一种常用的指令：v-model，以及v-model指令特性带来的一些使用。
具体分析
依旧是以简单实例为引去分析Vue.js中针对v-model的处理，具体实例：
<input v-model="text" />
<script>
new Vue({
data: {
text: '测试v-model'
}
})
</script>
实际上v-model的处理还需要从render函数的构建来说，即baseCompile来完成ast树的构建。
parse解析v-model
实际上这部分构建v-model在ast结构中的具体结构，具体的处理逻辑如下：
Vue源码中对于v-model在静态解析阶段，实际上分为两部分：
- 解析出v-model部分
- 针对v-model指令的特殊处理
首先第一点：解析出v-model部分，此处的处理与Vue.js中标签属性是相同的处理，即v-model作为属性名，就实例而言，即{‘v-model’: text}
第二点：v-model指令特殊处理，v-model虽然是标签的属性，但是是Vue.js中的指令，此时就是上面逻辑中给出的，实际上最后会调用processAttrs来处理
processAttrs
下面就来看看针对v-model，这边相关的处理逻辑如下：
从上面的逻辑过程中可知：
processAttrs实际上处理三种特殊的属性：指令、事件绑定、prop
而针对指令的相关处理实际上主要就是调用：addDirective，该函数的作用就是构建指令对象并创建directives对象，即：
el.directives.push({
// 不带v-前缀的指令名
name,
// 完整名称
rawName,
// 指令的绑定值
value,
// 传递给指令的参数
arg,
// 一个包含修饰符的对象
modifiers
});
generate中处理v-model部分
generate函数实际上就是将parse出来的code解析成指定结构的AST。
就以实例来说，在parse阶段实际上v-model实际上构建成了如下的结构并保存在directives中：
{
arg: null
modifiers: undefined
name: "model"
rawName: "v-model"
value: "text"
}
而在generate这个阶段的处理，主要逻辑如下：
上图中的主要逻辑都是建立在实例基础上的，实际上genElement中还有其他的逻辑针对不同情况，但是不是本篇要讨论的。实际的处理实际上会调用genData$2函数，而genData$2中关键的处理是genDirectives。
genDirectives中会调用model函数，而该函数实际上是针对不同的标签来进行处理，主要的处理逻辑如下：
对于标签是input的v-model的处理，实际上会调用getDefaultModel函数，该函数就是处理v-model成特定的结构，实际上还部分的逻辑主要就两点：
将v-model绑定的值作为prop
定义相关的事件，即v-model
第一点：调用addProp函数
(el.props || (el.props = [])).push({ name: name, value: value });
第二点：定义事件，如果modifiers中定义了lazy就会定义change事件，否则定义input事件
// 定义el.events
var events = el.events || (el.events = {});
// 这里兼容了多个相同事件的定义，如果用一个事件存在多个实际上这里就会保存为数组
/*
这里的code实际上对于当前实例则是
if($event.target.composing) return;
text=$event.target.value
*/
events[name] = { value: code}
之后的流程处理就回到了genData$2中了，而上面逻辑的定义props和event则会在接下来的逻辑处理中进行相关处理。
// v-model中定义props会在这里处理
if (el.props) {
data += "domProps:{" + (genProps(el.props)) + "},";
}
// v-model定义events会在这里处理
if (el.events) {
data += (genHandlers(el.events, false, state.warn)) + ",";
}
经历过generate的处理，实际上构建出Vue.js指定的结构了，就以实例而言，v-model所在标签构建的结构如下：
_c('input',
{
directives:[
{
name:"model",
rawName:"v-model",
value:(text),
expression:"text"
}
],
domProps:{"value":(text)},
on:{
"input":function($event){
if($event.target.composing) return;
text=$event.target.value
}
}
}
)
补充
上面的处理是基于实例的基础的逻辑，而实际上model函数针对标签的类型有不同的处理逻辑，主要类型分为：
- 子组件
- select标签
- checkbox标签
- radio标签
- input或textarea标签
- 非HTML标签或SVG标签
子组件v-model
子组件会调用genComponentModel函数来处理，主要的处理逻辑是定义model属性，即：
el.model = {
value,
expression,
callback,
};
而在genData$2中处理如下：
// component v-model
if (el.model) {
data += "model:{value:" + (el.model.value) + ",callback:" + (el.model.callback) + ",expression:" + (el.model.expression) + "},";
}
非html或SVG标签也是调用该函数进行相关处理。
select标签v-model
调用genSelect函数，定义change事件：
var number = modifiers && modifiers.number;
// 从这里可以看出v-model背后的主要处理了
var selectedVal = "Array.prototype.filter" +
".call($event.target.options,function(o){return o.selected})" +
".map(function(o){var val = \"_value\" in o ? o._value : o.value;" +
"return " + (number ? '_n(val)' : 'val') + "})";
var assignment = '$event.target.multiple ? $$selectedVal : $$selectedVal[0]';
var code = "var $$selectedVal = " + selectedVal + ";";
code = code + " " + (genAssignmentCode(value, assignment));
// 定义events属性
addHandler(el, 'change', code, null, true);
checkbox和radio标签v-model
这两种标签主要的处理逻辑基本相同（但是不是同一个函数），定义checked属性和change事件，主要的处理还是change中获取当前状态
v-model使用姿势
从上面整个分析，v-model在编辑过程的结构就比较清晰了，下面列举下场使用子组件更新prop内容的几种方式以及model修改：
-
在子组件中常使用input更新父组件中传递的prop：
function(e) { this.$emit('input', e); } -
在子组件中修改v-model的默认事件，提供修改v-model的默认处理
model: { prop: 'checked', event: 'change' }， props: { value: String, checked: { type: Number, default: 0 } }
再看上面的一些使用，估计就很清晰了，实际上Vue.js也提供sync修饰符 + update事件来实现子组件更新prop值。