genComponentModel() — vue Function Reference

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

Function typescript CompilerSFC ScriptCompiler calls 1 called by 1

Entity Profile

CompilerSFC→ ScriptCompiler→ genComponentModel() — vue Function Reference

Dependency Diagram

graph TD
  d047fb26_d0a6_5703_c5d5_08311329c6e9["genComponentModel()"]
  14d3bb86_7a8d_fa98_8bf9_6d426675527b["model()"]
  14d3bb86_7a8d_fa98_8bf9_6d426675527b -->|calls| d047fb26_d0a6_5703_c5d5_08311329c6e9
  4f4016d4_c2a9_540e_d1fd_9dabe55a1d29["genAssignmentCode()"]
  d047fb26_d0a6_5703_c5d5_08311329c6e9 -->|calls| 4f4016d4_c2a9_540e_d1fd_9dabe55a1d29
  style d047fb26_d0a6_5703_c5d5_08311329c6e9 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}}`
  }
}