initProps() — vue Function Reference

Architecture documentation for the initProps() function in state.ts from the vue codebase.

Function typescript VueCore Instance calls 3 called by 2

Entity Profile

VueCore→ Instance→ initProps() — vue Function Reference

Dependency Diagram

graph TD
  11be9efe_fcdb_2fab_aef6_4fe2f72d828f["initProps()"]
  079339bc_f0ce_0fd0_3d1b_26a2dc073616["state.ts"]
  11be9efe_fcdb_2fab_aef6_4fe2f72d828f -->|defined in| 079339bc_f0ce_0fd0_3d1b_26a2dc073616
  633e435b_6794_5170_c66c_026a552fcc59["initProps()"]
  633e435b_6794_5170_c66c_026a552fcc59 -->|calls| 11be9efe_fcdb_2fab_aef6_4fe2f72d828f
  ff5d1d58_05a4_1c98_682b_8814ac1fe9fd["initState()"]
  ff5d1d58_05a4_1c98_682b_8814ac1fe9fd -->|calls| 11be9efe_fcdb_2fab_aef6_4fe2f72d828f
  c9e94feb_048a_387e_29a1_1567a76d119c["toggleObserving()"]
  11be9efe_fcdb_2fab_aef6_4fe2f72d828f -->|calls| c9e94feb_048a_387e_29a1_1567a76d119c
  dea83477_00f1_3c8b_f0a1_584882807d1f["defineReactive()"]
  11be9efe_fcdb_2fab_aef6_4fe2f72d828f -->|calls| dea83477_00f1_3c8b_f0a1_584882807d1f
  fad58ec8_df0b_6b38_de80_539f1b7ee0f3["proxy()"]
  11be9efe_fcdb_2fab_aef6_4fe2f72d828f -->|calls| fad58ec8_df0b_6b38_de80_539f1b7ee0f3
  style 11be9efe_fcdb_2fab_aef6_4fe2f72d828f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/instance/state.ts lines 72–126

function initProps(vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  const props = (vm._props = shallowReactive({}))
  // cache prop keys so that future props updates can iterate using Array
  // instead of dynamic object key enumeration.
  const keys: string[] = (vm.$options._propKeys = [])
  const isRoot = !vm.$parent
  // root instance props should be converted
  if (!isRoot) {
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (__DEV__) {
      const hyphenatedKey = hyphenate(key)
      if (
        isReservedAttribute(hyphenatedKey) ||
        config.isReservedAttr(hyphenatedKey)
      ) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(
        props,
        key,
        value,
        () => {
          if (!isRoot && !isUpdatingChildComponent) {
            warn(
              `Avoid mutating a prop directly since the value will be ` +
                `overwritten whenever the parent component re-renders. ` +
                `Instead, use a data or computed property based on the prop's ` +
                `value. Prop being mutated: "${key}"`,
              vm
            )
          }
        },
        true /* shallow */
      )
    } else {
      defineReactive(props, key, value, undefined, true /* shallow */)
    }
    // static props are already proxied on the component's prototype
    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}