FunctionalRenderContext() — vue Function Reference

Architecture documentation for the FunctionalRenderContext() function in create-functional-component.ts from the vue codebase.

Function typescript CoreInstance Lifecycle calls 4 called by 1

Entity Profile

CoreInstance→ Lifecycle→ FunctionalRenderContext() — vue Function Reference

Dependency Diagram

graph TD
  7687c516_230a_8fa2_229a_3ce9660be4d2["FunctionalRenderContext()"]
  c4732d15_fd52_2b9b_6d6d_65e127972dda["createFunctionalComponent()"]
  c4732d15_fd52_2b9b_6d6d_65e127972dda -->|calls| 7687c516_230a_8fa2_229a_3ce9660be4d2
  12260c80_c59d_3746_e188_99161d7cd0ca["resolveInject()"]
  7687c516_230a_8fa2_229a_3ce9660be4d2 -->|calls| 12260c80_c59d_3746_e188_99161d7cd0ca
  7f59d675_8a0c_03b6_a7a6_985942631eb0["normalizeScopedSlots()"]
  7687c516_230a_8fa2_229a_3ce9660be4d2 -->|calls| 7f59d675_8a0c_03b6_a7a6_985942631eb0
  456d8782_7a49_0d3e_9e64_31ae4ba7b534["resolveSlots()"]
  7687c516_230a_8fa2_229a_3ce9660be4d2 -->|calls| 456d8782_7a49_0d3e_9e64_31ae4ba7b534
  451b8ba4_f373_c786_0c64_c3e7e51ce956["createElement()"]
  7687c516_230a_8fa2_229a_3ce9660be4d2 -->|calls| 451b8ba4_f373_c786_0c64_c3e7e51ce956
  style 7687c516_230a_8fa2_229a_3ce9660be4d2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/create-functional-component.ts lines 21–96

export function FunctionalRenderContext(
  data: VNodeData,
  props: Object,
  children: Array<VNode> | undefined,
  parent: Component,
  Ctor: typeof Component
) {
  const options = Ctor.options
  // ensure the createElement function in functional components
  // gets a unique context - this is necessary for correct named slot check
  let contextVm
  if (hasOwn(parent, '_uid')) {
    contextVm = Object.create(parent)
    contextVm._original = parent
  } else {
    // the context vm passed in is a functional context as well.
    // in this case we want to make sure we are able to get a hold to the
    // real context instance.
    contextVm = parent
    // @ts-ignore
    parent = parent._original
  }
  const isCompiled = isTrue(options._compiled)
  const needNormalization = !isCompiled

  this.data = data
  this.props = props
  this.children = children
  this.parent = parent
  this.listeners = data.on || emptyObject
  this.injections = resolveInject(options.inject, parent)
  this.slots = () => {
    if (!this.$slots) {
      normalizeScopedSlots(
        parent,
        data.scopedSlots,
        (this.$slots = resolveSlots(children, parent))
      )
    }
    return this.$slots
  }

  Object.defineProperty(this, 'scopedSlots', {
    enumerable: true,
    get() {
      return normalizeScopedSlots(parent, data.scopedSlots, this.slots())
    }
  } as any)

  // support for compiled functional template
  if (isCompiled) {
    // exposing $options for renderStatic()
    this.$options = options
    // pre-resolve slots for renderSlot()
    this.$slots = this.slots()
    this.$scopedSlots = normalizeScopedSlots(
      parent,
      data.scopedSlots,
      this.$slots
    )
  }

  if (options._scopeId) {
    this._c = (a, b, c, d) => {
      const vnode = createElement(contextVm, a, b, c, d, needNormalization)
      if (vnode && !isArray(vnode)) {
        vnode.fnScopeId = options._scopeId
        vnode.fnContext = parent
      }
      return vnode
    }
  } else {
    this._c = (a, b, c, d) =>
      createElement(contextVm, a, b, c, d, needNormalization)
  }
}