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
  76fb6501_9238_f973_a09b_d816dccd3853["renderComponent()"]
  439dcf36_0570_3186_196e_91c09d6d3ea6["render.ts"]
  76fb6501_9238_f973_a09b_d816dccd3853 -->|defined in| 439dcf36_0570_3186_196e_91c09d6d3ea6
  51b378bf_731a_cea8_7ade_1275c8da637e["renderNode()"]
  51b378bf_731a_cea8_7ade_1275c8da637e -->|calls| 76fb6501_9238_f973_a09b_d816dccd3853
  3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5["renderAsyncComponent()"]
  3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5 -->|calls| 76fb6501_9238_f973_a09b_d816dccd3853
  916e77c4_6ed2_baeb_dd37_5bbdbfb0ce8c["registerComponentForCache()"]
  76fb6501_9238_f973_a09b_d816dccd3853 -->|calls| 916e77c4_6ed2_baeb_dd37_5bbdbfb0ce8c
  a4633a93_7f98_e71f_6c82_18c7a08cb6b0["renderComponentInner()"]
  76fb6501_9238_f973_a09b_d816dccd3853 -->|calls| a4633a93_7f98_e71f_6c82_18c7a08cb6b0
  9e184023_1a75_b751_032d_8bcff0aee29e["renderComponentWithCache()"]
  76fb6501_9238_f973_a09b_d816dccd3853 -->|calls| 9e184023_1a75_b751_032d_8bcff0aee29e
  5ab79bc9_4b06_7e86_1eab_34a260357178["warnOnce()"]
  76fb6501_9238_f973_a09b_d816dccd3853 -->|calls| 5ab79bc9_4b06_7e86_1eab_34a260357178
  style 76fb6501_9238_f973_a09b_d816dccd3853 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