genIfConditions() — vue Function Reference

Architecture documentation for the genIfConditions() function in index.ts from the vue codebase.

Function typescript VueCore VDom calls 2 called by 1

Entity Profile

VueCore→ VDom→ genIfConditions() — vue Function Reference

Dependency Diagram

graph TD
  86c7d981_30e6_c29a_19f3_e7b26950b745["genIfConditions()"]
  6a18399e_553e_fef8_6a39_746f79f94bd2["index.ts"]
  86c7d981_30e6_c29a_19f3_e7b26950b745 -->|defined in| 6a18399e_553e_fef8_6a39_746f79f94bd2
  539756f9_3a11_1e1c_313e_d779ff83093a["genIf()"]
  539756f9_3a11_1e1c_313e_d779ff83093a -->|calls| 86c7d981_30e6_c29a_19f3_e7b26950b745
  f9b375f7_0463_ff1f_5be6_7e356b4bded3["genOnce()"]
  86c7d981_30e6_c29a_19f3_e7b26950b745 -->|calls| f9b375f7_0463_ff1f_5be6_7e356b4bded3
  009d7fc7_09cb_184e_e93c_1f468ff505c0["genElement()"]
  86c7d981_30e6_c29a_19f3_e7b26950b745 -->|calls| 009d7fc7_09cb_184e_e93c_1f468ff505c0
  style 86c7d981_30e6_c29a_19f3_e7b26950b745 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codegen/index.ts lines 212–239

function genIfConditions(
  conditions: ASTIfConditions,
  state: CodegenState,
  altGen?: Function,
  altEmpty?: string
): string {
  if (!conditions.length) {
    return altEmpty || '_e()'
  }

  const condition = conditions.shift()!
  if (condition.exp) {
    return `(${condition.exp})?${genTernaryExp(
      condition.block
    )}:${genIfConditions(conditions, state, altGen, altEmpty)}`
  } else {
    return `${genTernaryExp(condition.block)}`
  }

  // v-if with v-once should generate code like (a)?_m(0):_m(1)
  function genTernaryExp(el) {
    return altGen
      ? altGen(el, state)
      : el.once
      ? genOnce(el, state)
      : genElement(el, state)
  }
}