Home / Function/ updateChildComponent() — vue Function Reference

updateChildComponent() — vue Function Reference

Architecture documentation for the updateChildComponent() function in lifecycle.ts from the vue codebase.

Entity Profile

Dependency Diagram

graph TD
  75058e43_64c9_ef74_0dc8_3767f108116b["updateChildComponent()"]
  9a16003e_e544_eecc_85fb_60ab889293ea["componentVNodeHooks.prepatch()"]
  9a16003e_e544_eecc_85fb_60ab889293ea -->|calls| 75058e43_64c9_ef74_0dc8_3767f108116b
  5cee52f7_79bb_2c7c_c725_f0cd5a668b84["syncSetupProxy()"]
  75058e43_64c9_ef74_0dc8_3767f108116b -->|calls| 5cee52f7_79bb_2c7c_c725_f0cd5a668b84
  7005a2f1_ebbd_b993_9d8d_1b6b9068c533["updateComponentListeners()"]
  75058e43_64c9_ef74_0dc8_3767f108116b -->|calls| 7005a2f1_ebbd_b993_9d8d_1b6b9068c533
  65e1e423_bb6b_4902_ff2a_5a19cc670a5f["toggleObserving()"]
  75058e43_64c9_ef74_0dc8_3767f108116b -->|calls| 65e1e423_bb6b_4902_ff2a_5a19cc670a5f
  d8821cb4_3136_e465_ecc1_56f86574ae34["resolveSlots()"]
  75058e43_64c9_ef74_0dc8_3767f108116b -->|calls| d8821cb4_3136_e465_ecc1_56f86574ae34
  style 75058e43_64c9_ef74_0dc8_3767f108116b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/instance/lifecycle.ts lines 246–351

export function updateChildComponent(
  vm: Component,
  propsData: Record<string, any> | null | undefined,
  listeners: Record<string, Function | Array<Function>> | undefined,
  parentVnode: MountedComponentVNode,
  renderChildren?: Array<VNode> | null
) {
  if (__DEV__) {
    isUpdatingChildComponent = true
  }

  // determine whether component has slot children
  // we need to do this before overwriting $options._renderChildren.

  // check if there are dynamic scopedSlots (hand-written or compiled but with
  // dynamic slot names). Static scoped slots compiled from template has the
  // "$stable" marker.
  const newScopedSlots = parentVnode.data.scopedSlots
  const oldScopedSlots = vm.$scopedSlots
  const hasDynamicScopedSlot = !!(
    (newScopedSlots && !newScopedSlots.$stable) ||
    (oldScopedSlots !== emptyObject && !oldScopedSlots.$stable) ||
    (newScopedSlots && vm.$scopedSlots.$key !== newScopedSlots.$key) ||
    (!newScopedSlots && vm.$scopedSlots.$key)
  )

  // Any static slot children from the parent may have changed during parent's
  // update. Dynamic scoped slots may also have changed. In such cases, a forced
  // update is necessary to ensure correctness.
  let needsForceUpdate = !!(
    renderChildren || // has new static slots
    vm.$options._renderChildren || // has old static slots
    hasDynamicScopedSlot
  )

  const prevVNode = vm.$vnode
  vm.$options._parentVnode = parentVnode
  vm.$vnode = parentVnode // update vm's placeholder node without re-render

  if (vm._vnode) {
    // update child tree's parent
    vm._vnode.parent = parentVnode
  }
  vm.$options._renderChildren = renderChildren

  // update $attrs and $listeners hash
  // these are also reactive so they may trigger child update if the child
  // used them during render
  const attrs = parentVnode.data.attrs || emptyObject
  if (vm._attrsProxy) {
    // force update if attrs are accessed and has changed since it may be
    // passed to a child component.
    if (
      syncSetupProxy(
        vm._attrsProxy,
        attrs,
        (prevVNode.data && prevVNode.data.attrs) || emptyObject,
        vm,
        '$attrs'
      )
    ) {
      needsForceUpdate = true
    }
  }
  vm.$attrs = attrs

  // update listeners
  listeners = listeners || emptyObject
  const prevListeners = vm.$options._parentListeners
  if (vm._listenersProxy) {
    syncSetupProxy(
      vm._listenersProxy,
      listeners,
      prevListeners || emptyObject,
      vm,
      '$listeners'
    )
  }
  vm.$listeners = vm.$options._parentListeners = listeners
  updateComponentListeners(vm, listeners, prevListeners)

  // update props
  if (propsData && vm.$options.props) {
    toggleObserving(false)
    const props = vm._props
    const propKeys = vm.$options._propKeys || []
    for (let i = 0; i < propKeys.length; i++) {
      const key = propKeys[i]
      const propOptions: any = vm.$options.props // wtf flow?
      props[key] = validateProp(key, propOptions, propsData, vm)
    }
    toggleObserving(true)
    // keep a copy of raw propsData
    vm.$options.propsData = propsData
  }

  // resolve slots + force update if has children
  if (needsForceUpdate) {
    vm.$slots = resolveSlots(renderChildren, parentVnode.context)
    vm.$forceUpdate()
  }

  if (__DEV__) {
    isUpdatingChildComponent = false
  }
}

Domain

Subdomains

Frequently Asked Questions

What does updateChildComponent() do?
updateChildComponent() is a function in the vue codebase.
What does updateChildComponent() call?
updateChildComponent() calls 4 function(s): resolveSlots, syncSetupProxy, toggleObserving, updateComponentListeners.
What calls updateChildComponent()?
updateChildComponent() is called by 1 function(s): componentVNodeHooks.prepatch.

Analyze Your Own Codebase

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

Try Supermodel Free