genComponentModel() — vue Function Reference

Architecture documentation for the genComponentModel() function in model.ts from the vue codebase.

Function typescript TemplateCompiler CodeGen calls 1 called by 1

Entity Profile

TemplateCompiler→ CodeGen→ genComponentModel() — vue Function Reference

Dependency Diagram

graph TD
  1a9231b2_4b29_3b21_f054_61241d85883c["genComponentModel()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1["model()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1 -->|calls| 1a9231b2_4b29_3b21_f054_61241d85883c
  36fcfc37_216e_9f34_5a69_e976b9f178f6["genAssignmentCode()"]
  1a9231b2_4b29_3b21_f054_61241d85883c -->|calls| 36fcfc37_216e_9f34_5a69_e976b9f178f6
  style 1a9231b2_4b29_3b21_f054_61241d85883c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/directives/model.ts lines 6–31

export function genComponentModel(
  el: ASTElement,
  value: string,
  modifiers: ASTModifiers | null
): void {
  const { number, trim } = modifiers || {}

  const baseValueExpression = '$$v'
  let valueExpression = baseValueExpression
  if (trim) {
    valueExpression =
      `(typeof ${baseValueExpression} === 'string'` +
      `? ${baseValueExpression}.trim()` +
      `: ${baseValueExpression})`
  }
  if (number) {
    valueExpression = `_n(${valueExpression})`
  }
  const assignment = genAssignmentCode(value, valueExpression)

  el.model = {
    value: `(${value})`,
    expression: JSON.stringify(value),
    callback: `function (${baseValueExpression}) {${assignment}}`
  }
}