v-model原理問題

v-model的原理

很多同學在理解Vue的時候都把Vue的數據響應原理理解為雙向綁定，但實際上這是不准確的，我們之前提到的數據響應，都是通過數據的改變去驅動DOM重新的變化，而雙向綁定已有數據驅動DOM外，DOM的變化反過來影響數據，是一個雙向關系，在Vue中，我們可以通過v-model來實現雙向綁定。

v-model即可以作用在普通表單元素上，又可以作用在組件上，它實際上是一個語法糖，接下來我們就來分析v-model的實現原理。

表單元素

為了更加直觀，我們還是結合示例來分析：

let vm = new Vue({
  el: '#app',
  template: '<div>'
  + '<input v-model="message" placeholder="edit me">' +
  '<p>Message is: {{ message }}</p>' +
  '</div>',
  data() {
    return {
      message: ''
    }
  }
})

這是一個非常簡單的演示，我們在input元素上設置了v-model屬性，綁定了message，當我們在input上輸入了內容，message也會同步變化。接下來我們就來分析Vue是如何實現這一效果的，其實非常簡單。

也是先從編譯階段分析，首先是parse階段，v-model被當做普通的指令解析到el.directives中，然后在codegen階段，執行genData的時候，會執行const dirs = genDirectives(el, state)，它的定義在src/compiler/codegen/index.js中：

function genDirectives (el: ASTElement, state: CodegenState): string | void {
  const dirs = el.directives
  if (!dirs) return
  let res = 'directives:['
  let hasRuntime = false
  let i, l, dir, needRuntime
  for (i = 0, l = dirs.length; i < l; i++) {
    dir = dirs[i]
    needRuntime = true
    const gen: DirectiveFunction = state.directives[dir.name]
    if (gen) {
      // compile-time directive that manipulates AST.
      // returns true if it also needs a runtime counterpart.
      needRuntime = !!gen(el, dir, state.warn)
    }
    if (needRuntime) {
      hasRuntime = true
      res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
        dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''
      }${
        dir.arg ? `,arg:"${dir.arg}"` : ''
      }${
        dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
      }},`
    }
  }
  if (hasRuntime) {
    return res.slice(0, -1) + ']'
  }
}

 

genDrirectives方法就是遍歷el.directives，然后獲取每一個指令對應的方法const gen: DirectiveFunction = state.directives[dir.name]，這個指令方法實際上是在實例化CodegenState的時候通過option 引用的，這個option就是編譯相關的配置，它在不同的平台下配置不同，在web環境下的定義在src/platforms/web/compiler/options.js下：

export const baseOptions: CompilerOptions = {
  expectHTML: true,
  modules,
  directives,
  isPreTag,
  isUnaryTag,
  mustUseProp,
  canBeLeftOpenTag,
  isReservedTag,
  getTagNamespace,
  staticKeys: genStaticKeys(modules)
}
directives定義在src/platforms/web/compiler/directives/index.js中：


export default {
  model,
  text,
  html
}
// 那么對於v-model而言，對應的directive函數是在src/platforms/web/compiler/directives/model.js中定義的model函數：

export default function model (
  el: ASTElement,
  dir: ASTDirective,
  _warn: Function
): ?boolean {
  warn = _warn
  const value = dir.value
  const modifiers = dir.modifiers
  const tag = el.tag
  const type = el.attrsMap.type
​
  if (process.env.NODE_ENV !== 'production') {
    // inputs with type="file" are read only and setting the input's
    // value will throw an error.
    if (tag === 'input' && type === 'file') {
      warn(
        `<${el.tag} v-model="${value}" type="file">:\n` +
        `File inputs are read only. Use a v-on:change listener instead.`
      )
    }
  }
​
  if (el.component) {
    genComponentModel(el, value, modifiers)
    // component v-model doesn't need extra runtime
    return false
  } else if (tag === 'select') {
    genSelect(el, value, modifiers)
  } else if (tag === 'input' && type === 'checkbox') {
    genCheckboxModel(el, value, modifiers)
  } else if (tag === 'input' && type === 'radio') {
    genRadioModel(el, value, modifiers)
  } else if (tag === 'input' || tag === 'textarea') {
    genDefaultModel(el, value, modifiers)
  } else if (!config.isReservedTag(tag)) {
    genComponentModel(el, value, modifiers)
    // component v-model doesn't need extra runtime
    return false
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `<${el.tag} v-model="${value}">: ` +
      `v-model is not supported on this element type. ` +
      'If you are working with contenteditable, it\'s recommended to ' +
      'wrap a library dedicated for that purpose inside a custom component.'
    )
  }
​
  // ensure runtime directive metadata
  return true
}

也就是說我們執行needRuntime = !!gen(el, dir, state.warn)就是在執行model函數，它會根據AST元素例程的不同情況去執行不同的邏輯，對於我們這個案例而言，它會命中genDefaultModel(el, value, modifiers)的邏輯，稍后我們也會介紹組件的處理，其他分開同學們可以自行去看。我們來看一下genDefaultModel的實現：

function genDefaultModel (
  el: ASTElement,
  value: string,
  modifiers: ?ASTModifiers
): ?boolean {
  const type = el.attrsMap.type
​
  // warn if v-bind:value conflicts with v-model
  // except for inputs with v-bind:type
  if (process.env.NODE_ENV !== 'production') {
    const value = el.attrsMap['v-bind:value'] || el.attrsMap[':value']
    const typeBinding = el.attrsMap['v-bind:type'] || el.attrsMap[':type']
    if (value && !typeBinding) {
      const binding = el.attrsMap['v-bind:value'] ? 'v-bind:value' : ':value'
      warn(
        `${binding}="${value}" conflicts with v-model on the same element ` +
        'because the latter already expands to a value binding internally'
      )
    }
  }
​
  const { lazy, number, trim } = modifiers || {}
  const needCompositionGuard = !lazy && type !== 'range'
  const event = lazy
    ? 'change'
    : type === 'range'
      ? RANGE_TOKEN
      : 'input'
​
  let valueExpression = '$event.target.value'
  if (trim) {
    valueExpression = `$event.target.value.trim()`
  }
  if (number) {
    valueExpression = `_n(${valueExpression})`
  }
​
  let code = genAssignmentCode(value, valueExpression)
  if (needCompositionGuard) {
    code = `if($event.target.composing)return;${code}`
  }
​
  addProp(el, 'value', `(${value})`)
  addHandler(el, event, code, null, true)
  if (trim || number) {
    addHandler(el, 'blur', '$forceUpdate()')
  }
}

 

genDefaultModel函數先處理了modifiers，它的不同主要影響的是event和valueExpression的值，對於我們的示例，event為input，valueExpression為$event.target.value。然后去執行genAssignmentCode去生成代碼，它的定義在src/compiler/directives/model.js中：

/**
 * Cross-platform codegen helper for generating v-model value assignment code.
 */
export function genAssignmentCode (
  value: string,
  assignment: string
): string {
  const res = parseModel(value)
  if (res.key === null) {
    return `${value}=${assignment}`
  } else {
    return `$set(${res.exp}, ${res.key}, ${assignment})`
  }
}

 

該方法首先對對應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句非常關鍵的代碼：

addProp(el, 'value', `(${value})`)
addHandler(el, event, code, null, true)

這實際上就是input實現v-model的精髓，通過修改AST元素，給el添加一個prop，相當於我們在input上動態綁定了value，又給el添加了事件處理，相當於在input上綁定了input事件，實際上轉換成模板如下：

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

 

其實就是動態綁定了input的value指向messgae變量，並且在觸發input事件的時候去動態把message設置為目標值，這樣實際上就完成了數據雙向綁定了，所以說v-model實際上就是語法糖。

再回到genDirectives，它接下來的邏輯就是根據指令生成一些data的代碼：

if (needRuntime) {
  hasRuntime = true
  res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
    dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''
  }${
    dir.arg ? `,arg:"${dir.arg}"` : ''
  }${
    dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
  }},`
}

 

對我們的例子而言，最終生成的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))])
    ])
}

關於事件的處理我們之前的章節已經分析過了，所以對於input的v-model而言，完全就是語法糖，並且對於其他表單元素套路都是一樣，區別在於生成的事件代碼會略有不同。

v-model 除了作用在表單元素上，新版的Vue還把這一語法糖用在了組件上，接下來我們來分析它的實現。

 

本文轉自 http://caibaojian.com/vue-analysis/extend/v-model.html