default.render() — vue Function Reference

Architecture documentation for the default.render() function in transition-group.ts from the vue codebase.

Function typescript WebPlatform WebRuntime calls 1

Entity Profile

WebPlatform→ WebRuntime→ default.render() — vue Function Reference

Dependency Diagram

graph TD
  250dbd74_6a7a_d03d_f556_6f969fb0b9eb["default.render()"]
  f7026368_bf6f_2dd0_00ce_f887a9165898["transition-group.ts"]
  250dbd74_6a7a_d03d_f556_6f969fb0b9eb -->|defined in| f7026368_bf6f_2dd0_00ce_f887a9165898
  085b3402_189f_178a_c080_76b4cbb47ee4["extractTransitionData()"]
  250dbd74_6a7a_d03d_f556_6f969fb0b9eb -->|calls| 085b3402_189f_178a_c080_76b4cbb47ee4
  style 250dbd74_6a7a_d03d_f556_6f969fb0b9eb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/components/transition-group.ts lines 58–102

  render(h: Function) {
    const tag: string = this.tag || this.$vnode.data.tag || 'span'
    const map: Record<string, any> = Object.create(null)
    const prevChildren: Array<VNode> = (this.prevChildren = this.children)
    const rawChildren: Array<VNode> = this.$slots.default || []
    const children: Array<VNode> = (this.children = [])
    const transitionData = extractTransitionData(this)

    for (let i = 0; i < rawChildren.length; i++) {
      const c: VNode = rawChildren[i]
      if (c.tag) {
        if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
          children.push(c)
          map[c.key] = c
          ;(c.data || (c.data = {})).transition = transitionData
        } else if (__DEV__) {
          const opts = c.componentOptions
          const name: string = opts
            ? getComponentName(opts.Ctor.options as any) || opts.tag || ''
            : c.tag
          warn(`<transition-group> children must be keyed: <${name}>`)
        }
      }
    }

    if (prevChildren) {
      const kept: Array<VNode> = []
      const removed: Array<VNode> = []
      for (let i = 0; i < prevChildren.length; i++) {
        const c: VNode = prevChildren[i]
        c.data!.transition = transitionData
        // @ts-expect-error .getBoundingClientRect is not typed in Node
        c.data!.pos = c.elm.getBoundingClientRect()
        if (map[c.key!]) {
          kept.push(c)
        } else {
          removed.push(c)
        }
      }
      this.kept = h(tag, null, kept)
      this.removed = removed
    }

    return h(tag, null, children)
  },