genScopedSlots() — vue Function Reference

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

Function typescript CompilerSFC ScriptAnalyzer calls 3 called by 1

Entity Profile

CompilerSFC→ ScriptAnalyzer→ genScopedSlots() — vue Function Reference

Dependency Diagram

graph TD
  118a5b53_0e80_5668_cad0_a973c510ef35["genScopedSlots()"]
  54260741_ae9d_a025_86de_47c513f5f82d["index.ts"]
  118a5b53_0e80_5668_cad0_a973c510ef35 -->|defined in| 54260741_ae9d_a025_86de_47c513f5f82d
  02d2d2c1_c21e_ae8c_6eba_1f4c093c8eb4["genData()"]
  02d2d2c1_c21e_ae8c_6eba_1f4c093c8eb4 -->|calls| 118a5b53_0e80_5668_cad0_a973c510ef35
  e9a47089_4307_a69e_1b03_64c387b214d6["containsSlotChild()"]
  118a5b53_0e80_5668_cad0_a973c510ef35 -->|calls| e9a47089_4307_a69e_1b03_64c387b214d6
  27804826_1536_d9f6_16a0_0b84b98233f7["genScopedSlot()"]
  118a5b53_0e80_5668_cad0_a973c510ef35 -->|calls| 27804826_1536_d9f6_16a0_0b84b98233f7
  33863195_d9a8_70e9_28c4_e2427e3645d3["hash()"]
  118a5b53_0e80_5668_cad0_a973c510ef35 -->|calls| 33863195_d9a8_70e9_28c4_e2427e3645d3
  style 118a5b53_0e80_5668_cad0_a973c510ef35 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codegen/index.ts lines 413–468

function genScopedSlots(
  el: ASTElement,
  slots: { [key: string]: ASTElement },
  state: CodegenState
): string {
  // by default scoped slots are considered "stable", this allows child
  // components with only scoped slots to skip forced updates from parent.
  // but in some cases we have to bail-out of this optimization
  // for example if the slot contains dynamic names, has v-if or v-for on them...
  let needsForceUpdate =
    el.for ||
    Object.keys(slots).some(key => {
      const slot = slots[key]
      return (
        slot.slotTargetDynamic || slot.if || slot.for || containsSlotChild(slot) // is passing down slot from parent which may be dynamic
      )
    })

  // #9534: if a component with scoped slots is inside a conditional branch,
  // it's possible for the same component to be reused but with different
  // compiled slot content. To avoid that, we generate a unique key based on
  // the generated code of all the slot contents.
  let needsKey = !!el.if

  // OR when it is inside another scoped slot or v-for (the reactivity may be
  // disconnected due to the intermediate scope variable)
  // #9438, #9506
  // TODO: this can be further optimized by properly analyzing in-scope bindings
  // and skip force updating ones that do not actually use scope variables.
  if (!needsForceUpdate) {
    let parent = el.parent
    while (parent) {
      if (
        (parent.slotScope && parent.slotScope !== emptySlotScopeToken) ||
        parent.for
      ) {
        needsForceUpdate = true
        break
      }
      if (parent.if) {
        needsKey = true
      }
      parent = parent.parent
    }
  }

  const generatedSlots = Object.keys(slots)
    .map(key => genScopedSlot(slots[key], state))
    .join(',')

  return `scopedSlots:_u([${generatedSlots}]${
    needsForceUpdate ? `,null,true` : ``
  }${
    !needsForceUpdate && needsKey ? `,null,false,${hash(generatedSlots)}` : ``
  })`
}