createFunctionalComponent() — vue Function Reference

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

Function typescript VueCore Instance calls 4 called by 1

Entity Profile

VueCore→ Instance→ createFunctionalComponent() — vue Function Reference

Dependency Diagram

graph TD
  8e06d47c_8725_0580_db2e_8b6ce77e9953["createFunctionalComponent()"]
  414b37af_5f63_dee7_31a2_9a7cad5979ec["create-functional-component.ts"]
  8e06d47c_8725_0580_db2e_8b6ce77e9953 -->|defined in| 414b37af_5f63_dee7_31a2_9a7cad5979ec
  18846da1_d4a3_5b6b_af05_795ee5beebed["createComponent()"]
  18846da1_d4a3_5b6b_af05_795ee5beebed -->|calls| 8e06d47c_8725_0580_db2e_8b6ce77e9953
  7eff2464_fc79_ead7_ddae_c50b3c00c927["mergeProps()"]
  8e06d47c_8725_0580_db2e_8b6ce77e9953 -->|calls| 7eff2464_fc79_ead7_ddae_c50b3c00c927
  2b1a34a9_e713_84e7_6b26_d06155dba96c["FunctionalRenderContext()"]
  8e06d47c_8725_0580_db2e_8b6ce77e9953 -->|calls| 2b1a34a9_e713_84e7_6b26_d06155dba96c
  7d168d01_2689_bb30_fafb_ed29568d8865["cloneAndMarkFunctionalResult()"]
  8e06d47c_8725_0580_db2e_8b6ce77e9953 -->|calls| 7d168d01_2689_bb30_fafb_ed29568d8865
  212af4c6_0b5a_ad92_f29b_9db0f5709d7f["normalizeChildren()"]
  8e06d47c_8725_0580_db2e_8b6ce77e9953 -->|calls| 212af4c6_0b5a_ad92_f29b_9db0f5709d7f
  style 8e06d47c_8725_0580_db2e_8b6ce77e9953 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/create-functional-component.ts lines 100–151

export function createFunctionalComponent(
  Ctor: typeof Component,
  propsData: Object | undefined,
  data: VNodeData,
  contextVm: Component,
  children?: Array<VNode>
): VNode | Array<VNode> | void {
  const options = Ctor.options
  const props = {}
  const propOptions = options.props
  if (isDef(propOptions)) {
    for (const key in propOptions) {
      props[key] = validateProp(key, propOptions, propsData || emptyObject)
    }
  } else {
    if (isDef(data.attrs)) mergeProps(props, data.attrs)
    if (isDef(data.props)) mergeProps(props, data.props)
  }

  const renderContext = new FunctionalRenderContext(
    data,
    props,
    children,
    contextVm,
    Ctor
  )

  const vnode = options.render.call(null, renderContext._c, renderContext)

  if (vnode instanceof VNode) {
    return cloneAndMarkFunctionalResult(
      vnode,
      data,
      renderContext.parent,
      options,
      renderContext
    )
  } else if (isArray(vnode)) {
    const vnodes = normalizeChildren(vnode) || []
    const res = new Array(vnodes.length)
    for (let i = 0; i < vnodes.length; i++) {
      res[i] = cloneAndMarkFunctionalResult(
        vnodes[i],
        data,
        renderContext.parent,
        options,
        renderContext
      )
    }
    return res
  }
}