genScopedSlots() — vue Function Reference

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

Function typescript VueCore Observer calls 3 called by 1

Entity Profile

VueCore→ Observer→ genScopedSlots() — vue Function Reference

Dependency Diagram

graph TD
  e76cb7d0_b3c3_6c47_2e67_6c6f84d32371["genScopedSlots()"]
  6a18399e_553e_fef8_6a39_746f79f94bd2["index.ts"]
  e76cb7d0_b3c3_6c47_2e67_6c6f84d32371 -->|defined in| 6a18399e_553e_fef8_6a39_746f79f94bd2
  2f9548d4_5dab_e18c_c75b_5e2c2bf4a780["genData()"]
  2f9548d4_5dab_e18c_c75b_5e2c2bf4a780 -->|calls| e76cb7d0_b3c3_6c47_2e67_6c6f84d32371
  bf8a930d_6047_f0d8_7c18_26061f0d2664["containsSlotChild()"]
  e76cb7d0_b3c3_6c47_2e67_6c6f84d32371 -->|calls| bf8a930d_6047_f0d8_7c18_26061f0d2664
  db876b7b_004a_9015_7afa_993985df7520["genScopedSlot()"]
  e76cb7d0_b3c3_6c47_2e67_6c6f84d32371 -->|calls| db876b7b_004a_9015_7afa_993985df7520
  e740524c_6989_b248_6467_b356659c7057["hash()"]
  e76cb7d0_b3c3_6c47_2e67_6c6f84d32371 -->|calls| e740524c_6989_b248_6467_b356659c7057
  style e76cb7d0_b3c3_6c47_2e67_6c6f84d32371 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)}` : ``
  })`
}