Vue 組件上的v-model雙向綁定原理解析

Posted on by

之前我們分析瞭Vue中v-model指令在普通表單元素上的使用原理（點擊這裡跳轉），這一節我們繼續分析v-model指令在組件上的原理。

組件上的v-model原理

v-model指令在組件上的編譯過程的parse階段與在表單元素上一樣（可以參考），與普通表單元素不同之處在於genCode的階段，在執行model函數生成代碼的時候，會執行genComponentModel函數：

v-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
  ......
  } else if (tag === 'input' || tag === 'textarea') {
    // 本案例進入這個邏輯，我們分析一下
    genDefaultModel(el, value, modifiers)
  } else if (!config.isReservedTag(tag)) {
    // 非保留標簽，說明是組件節點，執行genComponentModel
    genComponentModel(el, value, modifiers)
    // component v-model doesn't need extra runtime
    return false
  } 
  ......
  
  return true
}
export function genComponentModel (
  el: ASTElement,
  value: string,
  modifiers: ?ASTModifiers
): ?boolean {
  // 解析修飾符
  const { number, trim } = modifiers || {}

  const baseValueExpression = '$$v'
  let valueExpression = baseValueExpression
  
  // 有trim修飾符，進入下面邏輯，生成value表達式
  if (trim) {
    valueExpression =
      `(typeof ${baseValueExpression} === 'string'` +
      `? ${baseValueExpression}.trim()` +
      `: ${baseValueExpression})`
  }
  // 有number修飾符，生成下面表達式
  if (number) {
    valueExpression = `_n(${valueExpression})`
  }
  // 解析 value，生成解析規范後的表達式
  const assignment = genAssignmentCode(value, valueExpression)

  // AST element上掛載model對象
  el.model = {
    value: `(${value})`,
    expression: `"${value}"`,
    callback: `function (${baseValueExpression}) {${assignment}}`
  }
}

可以看到組件執行完genDirectives解析model指令後，會在AST element節點上生成model對象，這是與普通表單元素不同的地方。組件的v-model在genCode過程中，執行完genDirectives後還有有一段邏輯，如下：

export function genData (el: ASTElement, state: CodegenState): string {
  let data = '{'

  // directives may mutate the el's other properties before they are generated.
  // 解析model指令
  const dirs = genDirectives(el, state)
  if (dirs) data += dirs + ','

  ......
  
  // component v-model
  // 組件上的v-model，進入該邏輯，拼接生成下面代碼字符串
  if (el.model) {
    data += `model:{value:${
      el.model.value
    },callback:${
      el.model.callback
    },expression:${
      el.model.expression
    }},`
  }

到這個時候才生成瞭最終的代碼字符串。

組件生成階段

export function createComponent (
 Ctor: Class<Component> | Function | Object | void,
 data: ?VNodeData,
 context: Component,
 children: ?Array<VNode>,
 tag?: string
): VNode | Array<VNode> | void {
 // ...
 // transform component v-model data into props & events
 // 如果data上有model屬性
 if (isDef(data.model)) {
   // 調用transformModel，傳入的參數為組件構造器的options配置項
   transformModel(Ctor.options, data)
 }

 // ...
 const vnode = new VNode(
   `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
   data, undefined, undefined, undefined, context,
   { Ctor, propsData, listeners, tag, children },
   asyncFactory
 )
 
 return vnode
}

在創建組件的時候，有上面這樣一段邏輯，當分析到節點上有model對象的時候，會調用transformModel函數，對v-model對象做下轉化：

// transform component v-model info (value and callback) into
// prop and event handler respectively.
function transformModel (options, data: any) {
  // 找到model上的prop屬性
  const prop = (options.model && options.model.prop) || 'value'
  // 找到model上的event事件
  const event = (options.model && options.model.event) || 'input'
  // 在data的props屬性對象上添加prop屬性值
  ;(data.props || (data.props = {}))[prop] = data.model.value
  // 在data的on屬性對象上添加event事件
  const on = data.on || (data.on = {})
  if (isDef(on[event])) {
    on[event] = [data.model.callback].concat(on[event])
  } else {
    on[event] = data.model.callback
  }
}

可以看到最終是將編譯過程中生成的model對象，解析成為value屬性和input事件，擴展到組件構造器的options配置項中。

以上可以得知，組件上v-model指令的本質也是生成瞭value屬性和input事件。

到此這篇關於Vue 組件上的v-model雙向綁定原理的文章就介紹到這瞭,更多相關Vue v-model雙向綁定內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：