mergeOptions() — vue Function Reference

Architecture documentation for the mergeOptions() function in options.ts from the vue codebase.

Function typescript VueCore VDom calls 4

Entity Profile

VueCore→ VDom→ mergeOptions() — vue Function Reference

Dependency Diagram

graph TD
  85601896_bdd4_0d52_f164_49f970cbbef3["mergeOptions()"]
  395cc6b0_6f88_f1b1_f5dd_8cdf5c229777["options.ts"]
  85601896_bdd4_0d52_f164_49f970cbbef3 -->|defined in| 395cc6b0_6f88_f1b1_f5dd_8cdf5c229777
  90eff807_db4c_cc74_cbcc_389cda3db27c["checkComponents()"]
  85601896_bdd4_0d52_f164_49f970cbbef3 -->|calls| 90eff807_db4c_cc74_cbcc_389cda3db27c
  c692d362_18f2_4cd8_b18e_cb7690dc1a63["normalizeProps()"]
  85601896_bdd4_0d52_f164_49f970cbbef3 -->|calls| c692d362_18f2_4cd8_b18e_cb7690dc1a63
  54876847_1df2_cdb1_bbe2_f88f5df7e25c["normalizeInject()"]
  85601896_bdd4_0d52_f164_49f970cbbef3 -->|calls| 54876847_1df2_cdb1_bbe2_f88f5df7e25c
  7428e31d_c2bc_2519_3c6b_668e513fa3a7["normalizeDirectives()"]
  85601896_bdd4_0d52_f164_49f970cbbef3 -->|calls| 7428e31d_c2bc_2519_3c6b_668e513fa3a7
  style 85601896_bdd4_0d52_f164_49f970cbbef3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/util/options.ts lines 411–459

export function mergeOptions(
  parent: Record<string, any>,
  child: Record<string, any>,
  vm?: Component | null
): ComponentOptions {
  if (__DEV__) {
    checkComponents(child)
  }

  if (isFunction(child)) {
    // @ts-expect-error
    child = child.options
  }

  normalizeProps(child, vm)
  normalizeInject(child, vm)
  normalizeDirectives(child)

  // Apply extends and mixins on the child options,
  // but only if it is a raw options object that isn't
  // the result of another mergeOptions call.
  // Only merged options has the _base property.
  if (!child._base) {
    if (child.extends) {
      parent = mergeOptions(parent, child.extends, vm)
    }
    if (child.mixins) {
      for (let i = 0, l = child.mixins.length; i < l; i++) {
        parent = mergeOptions(parent, child.mixins[i], vm)
      }
    }
  }

  const options: ComponentOptions = {} as any
  let key
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField(key: any) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}