vue Architecture Docs
Home / Function/ renderComponent() — vue Function Reference

renderComponent() — vue Function Reference

Architecture documentation for the renderComponent() function in render.ts from the vue codebase.

Function typescript ServerRenderer TemplateRenderer calls 4 called by 2

Entity Profile

Dependency Diagram

graph TD
  73d8a225_abe4_207c_8ace_a53edec56ba1["renderComponent()"]
  affe67c1_b5f5_cf58_e5d3_d3d820ab290f["render.ts"]
  73d8a225_abe4_207c_8ace_a53edec56ba1 -->|defined in| affe67c1_b5f5_cf58_e5d3_d3d820ab290f
  09a727a5_6777_1c56_897b_3604820d99ba["renderNode()"]
  09a727a5_6777_1c56_897b_3604820d99ba -->|calls| 73d8a225_abe4_207c_8ace_a53edec56ba1
  e37a9278_38b9_9843_639b_2e03afcc6e0c["renderAsyncComponent()"]
  e37a9278_38b9_9843_639b_2e03afcc6e0c -->|calls| 73d8a225_abe4_207c_8ace_a53edec56ba1
  debfef1c_8851_e4a1_8d4e_0e80ea40fef9["registerComponentForCache()"]
  73d8a225_abe4_207c_8ace_a53edec56ba1 -->|calls| debfef1c_8851_e4a1_8d4e_0e80ea40fef9
  0496e7ad_ac13_f15c_54da_dffea230eeb5["renderComponentInner()"]
  73d8a225_abe4_207c_8ace_a53edec56ba1 -->|calls| 0496e7ad_ac13_f15c_54da_dffea230eeb5
  773ec5e6_99c2_ab32_bda7_305d2f9c106b["renderComponentWithCache()"]
  73d8a225_abe4_207c_8ace_a53edec56ba1 -->|calls| 773ec5e6_99c2_ab32_bda7_305d2f9c106b
  615bff49_93fe_4b03_a45c_9f2c278b19e7["warnOnce()"]
  73d8a225_abe4_207c_8ace_a53edec56ba1 -->|calls| 615bff49_93fe_4b03_a45c_9f2c278b19e7
  style 73d8a225_abe4_207c_8ace_a53edec56ba1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/render.ts lines 111–173

function renderComponent(node, isRoot, context) {
  const { write, next, userContext } = context

  // check cache hit
  const Ctor = node.componentOptions.Ctor
  const getKey = Ctor.options.serverCacheKey
  const name = Ctor.options.name
  const cache = context.cache
  const registerComponent = registerComponentForCache(Ctor.options, write)

  if (isDef(getKey) && isDef(cache) && isDef(name)) {
    const rawKey = getKey(node.componentOptions.propsData)
    if (rawKey === false) {
      renderComponentInner(node, isRoot, context)
      return
    }
    const key = name + '::' + rawKey
    const { has, get } = context
    if (isDef(has)) {
      has(key, hit => {
        if (hit === true && isDef(get)) {
          get(key, res => {
            if (isDef(registerComponent)) {
              registerComponent(userContext)
            }
            res.components.forEach(register => register(userContext))
            write(res.html, next)
          })
        } else {
          renderComponentWithCache(node, isRoot, key, context)
        }
      })
    } else if (isDef(get)) {
      get(key, res => {
        if (isDef(res)) {
          if (isDef(registerComponent)) {
            registerComponent(userContext)
          }
          res.components.forEach(register => register(userContext))
          write(res.html, next)
        } else {
          renderComponentWithCache(node, isRoot, key, context)
        }
      })
    }
  } else {
    if (isDef(getKey) && isUndef(cache)) {
      warnOnce(
        `[vue-server-renderer] Component ${
          Ctor.options.name || '(anonymous)'
        } implemented serverCacheKey, ` +
          'but no cache was provided to the renderer.'
      )
    }
    if (isDef(getKey) && isUndef(name)) {
      warnOnce(
        `[vue-server-renderer] Components that implement "serverCacheKey" ` +
          `must also define a unique "name" option.`
      )
    }
    renderComponentInner(node, isRoot, context)
  }
}

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does renderComponent() do?
renderComponent() is a function in the vue codebase, defined in packages/server-renderer/src/render.ts.
Where is renderComponent() defined?
renderComponent() is defined in packages/server-renderer/src/render.ts at line 111.
What does renderComponent() call?
renderComponent() calls 4 function(s): registerComponentForCache, renderComponentInner, renderComponentWithCache, warnOnce.
What calls renderComponent()?
renderComponent() is called by 2 function(s): renderAsyncComponent, renderNode.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free