Analysis of v-model Data Binding#

// dev/src/compiler/index.js line 11
export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  const ast = parse(template.trim(), options) // Generate AST
  if (options.optimize !== false) {
    optimize(ast, options) // Optimize AST
  }
  const code = generate(ast, options) // Generate code i.e. render string
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

// dev/src/compiler/codegen/index.js line 43
export function generate (
  ast: ASTElement | void,
  options: CompilerOptions
): CodegenResult {
  const state = new CodegenState(options)
  const code = ast ? genElement(ast, state) : '_c("div")'
  return {
    render: `with(this){return ${code}}`, // render string
    staticRenderFns: state.staticRenderFns
  }
}

// dev/src/compiler/codegen/index.js line 55
export function genElement (el: ASTElement, state: CodegenState): string {
  // ...
  data = genData(el, state)
  // ...
}

// dev/src/compiler/codegen/index.js line 219
export function genData (el: ASTElement, state: CodegenState): string {
  // ...
  const dirs = genDirectives(el, state)
  // ...
}

// dev/src/compiler/codegen/index.js line 309
function genDirectives (el: ASTElement, state: CodegenState): string | void {
  const dirs = el.directives // Obtain directives
  if (!dirs) return
  let res = 'directives:['
  let hasRuntime = false
  let i, l, dir, needRuntime
  for (i = 0, l = dirs.length; i < l; i++) { // Iterate through directives
    dir = dirs[i]
    needRuntime = true
    const gen: DirectiveFunction = state.directives[dir.name] // For v-model, const gen = state.directives["model"];
    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.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''
      }${
        dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
      }},`
    }
  }
  if (hasRuntime) {
    return res.slice(0, -1) + ']'
  }
}

// dev/src/platforms/web/compiler/directives/model.js line 14
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') {
  // If the environment is not in production, we need to perform the following checks:
  // 1. Inputs with type="file" are read-only, and setting the input 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.`,
      el.rawAttrsMap['v-model']
    )
  }
}

// Branch handling
if (el.component) {
  genComponentModel(el, value, modifiers)
  // The 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)
  // The 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.',
    el.rawAttrsMap['v-model']
  )
}

// Ensure runtime directive metadata
return true
}

// dev/src/platforms/web/compiler/directives/model.js line 127
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
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',
      el.rawAttrsMap[binding]
    )
  }
}

// Modifier handling
修饰符处理
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()')
}

// dev/src/compiler/directives/model.js line 36
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})`
  }
}