Vue2.x源码分析 - v-model

v-model 即可以作用在普通表单元素上，又可以作用在组件上，它其实是一个语法糖。

普通元素input

input 实现 v-model 的精髓，通过修改 AST 元素，给 el 添加一个 prop，相当于我们在 input 上动态绑定了 value，又给 el 添加了事件处理，相当于在 input 上绑定了 input 事件。等于动态增加prop + DOM绑定事件语法糖实现。

// src/platforms/web/compiler/directives/model.js
addProp(el, 'value', `(${value})`)
addHandler(el, event, code, null, true)

<input v-model="message" />
<input
  v-bind:value="message"
  v-on:input="message=$event.target.value" />

// 最终生成的 render 代码
with(this) {
  return _c('div',[_c('input',{
    directives:[{
      name:"model",
      rawName:"v-model",
      value:(message),
      expression:"message"
    }],
    attrs:{"placeholder":"edit me"},
    domProps:{"value":(message)},
    on:{"input":function($event){
      if($event.target.composing)
        return;
      message=$event.target.value
    }}}),_c('p',[_v("Message is: "+_s(message))])
    ])
}

组件

组件v-model也是语法糖，最终也是如上面input普通元素，增加prop以及设置data.on事件。但组件事件走的是另外一套逻辑Vue2.x源码分析 - 事件系统。所以组件在编译阶段，不会直接设置data.on,而是给到中转变量el.model；在patch阶段的createComponent时，才把el.model转换为prop以及data.on（这时的data.on走的是组件事件的$on/$emit）。

编译阶段

// src/compiler/directives/model.js
export function genComponentModel (
  el: ASTElement,
  value: string,
  modifiers: ?ASTModifiers
): ?boolean {
    // 处理number,trim修饰符
  const { number, trim } = modifiers || {}
  const baseValueExpression = '$$v'
  let valueExpression = baseValueExpression
  if (trim) {
    valueExpression =
      `(typeof ${baseValueExpression} === 'string'` +
        `? ${baseValueExpression}.trim()` +
        `: ${baseValueExpression})`
  }
  if (number) {
    valueExpression = `_n(${valueExpression})`
  }

  // 生成el.model,在genData生成render函数有用到
  const assignment = genAssignmentCode(value, valueExpression)
  el.model = {
    value: `(${value})`,
    expression: `"${value}"`,
    callback: `function (${baseValueExpression}) {${assignment}}`
  }
}

// 生成的render函数
with(this){
  return _c('div',[_c('child',{
    model:{
      value:(message),
      callback:function ($$v) {
        message=$$v
      },
      expression:"message"
    }
  })])
}

patch阶段

// src/core/vdom/create-component.js
if (isDef(data.model)) {
   transformModel(Ctor.options, data)
}

function transformModel (options, data: any) {
  // api中的options.model可配置
  const prop = (options.model && options.model.prop) || 'value'
  const event = (options.model && options.model.event) || 'input';

  // 设置组件prop和事件
  (data.props || (data.props = {}))[prop] = data.model.value
  const on = data.on || (data.on = {})
  if (isDef(on[event])) {
    on[event] = [data.model.callback].concat(on[event])
  } else {
    on[event] = data.model.callback
  }
}

// 最终VNode.data如下，接下来就是组件的事件处理
data.props = {
  value: (message),
}
data.on = {
  input: function ($$v) {
    message=$$v
  }
}