genFor() — vue Function Reference

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

Function typescript CompilerSFC ScriptAnalyzer called by 2

Entity Profile

CompilerSFC→ ScriptAnalyzer→ genFor() — vue Function Reference

Dependency Diagram

graph TD
  5219b9aa_5abd_868e_f9ef_1a376162c229["genFor()"]
  54260741_ae9d_a025_86de_47c513f5f82d["index.ts"]
  5219b9aa_5abd_868e_f9ef_1a376162c229 -->|defined in| 54260741_ae9d_a025_86de_47c513f5f82d
  075d1f95_9965_89f4_3c01_f944fee6b553["genElement()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| 5219b9aa_5abd_868e_f9ef_1a376162c229
  27804826_1536_d9f6_16a0_0b84b98233f7["genScopedSlot()"]
  27804826_1536_d9f6_16a0_0b84b98233f7 -->|calls| 5219b9aa_5abd_868e_f9ef_1a376162c229
  style 5219b9aa_5abd_868e_f9ef_1a376162c229 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codegen/index.ts lines 241–275

export function genFor(
  el: any,
  state: CodegenState,
  altGen?: Function,
  altHelper?: string
): string {
  const exp = el.for
  const alias = el.alias
  const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
  const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''

  if (
    __DEV__ &&
    state.maybeComponent(el) &&
    el.tag !== 'slot' &&
    el.tag !== 'template' &&
    !el.key
  ) {
    state.warn(
      `<${el.tag} v-for="${alias} in ${exp}">: component lists rendered with ` +
        `v-for should have explicit keys. ` +
        `See https://v2.vuejs.org/v2/guide/list.html#key for more info.`,
      el.rawAttrsMap['v-for'],
      true /* tip */
    )
  }

  el.forProcessed = true // avoid recursion
  return (
    `${altHelper || '_l'}((${exp}),` +
    `function(${alias}${iterator1}${iterator2}){` +
    `return ${(altGen || genElement)(el, state)}` +
    '})'
  )
}