Vue.js 源码解析：深度理解 initProps 函数

引言

在 Vue.js 中，initProps 函数是组件初始化过程中的一个重要步骤，它负责处理组件的 props，使其变成响应式，并提供一些警告和检查。本文将深入解析 initProps 函数，探讨其实现原理和关键步骤。本文基于 Vue 源码 version 2.7.14

背景

在开始之前，我们需要了解一些背景知识：

• Vue 组件的 props 是用于接收父组件传递的数据机制。
• props 同样具有响应式，响应式系统是 Vue 的核心特性之一，它能用追踪数据的变化并实现视图的自动更新。

initProps 函数

源码位置：vue/src/core/instance/state.ts

1. initProps 函数的作用

initProps 主要用于处理组件的‘props’, 使其成为具有响应式数据，函数的核心功能：

• 获取props 数据： 从 vm.$options.propsData 获取 props 数据
• 创建响应式数据： 使用 shallowReactive创建一个浅层的响应式对象，并赋值给 vm._props
• 切换响应式观察状态： 判断当前组件是否是根节点，如果是根节点，则不会再用props 传进来，此时不需要启用响应式观察。
• 遍历处理 props： 循环遍历 propsOptions，验证prop 并将其设为响应式。
• 告警： 在开发环境，做校验告警，如：将保留字属性作为 props 时 发出告警。
• 代理到组件： 将 prop 代理到组件中，确保可以通过 this.propName 直接访问。

function initProps(vm: Component, propsOptions: Object) {
  // 获取 propsData
  const propsData = vm.$options.propsData || {}
  // 创建响应式对象 shallowReactive V3 方法
  const props = (vm._props = shallowReactive({}))

  // 缓存keys ，以便将来的key更新可以使用Array 而不是动态对象键枚举进行迭代。
  const keys: string[] = (vm.$options._propKeys = [])
  // 是否是根组件，不是根组件的话不会有props 传入 不需要响应式
  const isRoot = !vm.$parent
  if (!isRoot) {
    // 切换响应式状态
    toggleObserving(false)
  }


  for (const key in propsOptions) {
    // 循环 props 选项
    keys.push(key)
    // 校验 props 并获取 props 值
    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
          )
        }
      })
    } else {
      // 定义一个响应式的 props
      defineReactive(props, key, value)
    }
    // 当前key 不在组件的原型上
    // 代理到组件中，确保能够访问 props
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true) //不是根组件 启用响应式观察
}

从源码中可以看出 initProps 中主要的函数 为 shallowReactive、defineReactive，接下来一一解析。

2. shallowReactive 函数

initProps 函数中使用了 shallowReactive 来创建浅层响应式对象，这个函数的作用是创建一个具有响应性的对象，但是只会对对象的第一层属性进行相应，而不会递归处理嵌套对象。那为什么 initProps 中只需对第一层属性进行响应呢？来我们继续看下去

为什么 initProps 只对第一层属性进行响应？

首先 initProps 函数并不是用来专门创建响应式对象的，而是用来初始化实例的 props 属性。在 Vue 中， props 是父组件传给子组件的属性，这些属性的响应式应该由父组件来保证的。

shallowReactive 来创建浅层响应式对象，而不会递归地将嵌套对象的属性变成响应式。

defineReactive 函数，该函数的作用是将一个对象的属性变成响应式。然而，这里的目标并不是为了递归地将嵌套在 props 中的对象的属性都变成响应式，而是为了确保每个 props 中的属性都能够在组件实例中被访问。

因此，initProps 只关注 props 的第一层属性，而不会深入到嵌套的对象中去创建响应式。这是因为深层次的嵌套属性通常由父组件来管理和控制，子组件只需要访问这些属性而不需要在自身内部将它们变成响应式。 Vue.js 的设计哲学是在组件之间通过 props 进行数据传递，而不是在组件内部对传递的数据进行深度的响应式处理。

export function shallowReactive<T extends object>(
  target: T
): ShallowReactive<T> {
  // 调用 makeReactive 函数，传入目标对象和 true（表示浅层响应式）
  makeReactive(target, true)
  // 在目标对象上定义一个 IS_SHALLOW 标志为 true，表示该对象为浅层响应式
  def(target, ReactiveFlags.IS_SHALLOW, true)
  return target
}

function makeReactive(target: any, shallow: boolean) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (!isReadonly(target)) {  // 检查目标对象是否为只读代理，如果是，直接返回只读版本
    if (__DEV__) { // 如果目标对象是数组，发出警告，因为 Vue 2 不支持在 watch 或 watchEffect 中跟踪数组的变化
      if (isArray(target)) {
        warn(
          `Avoid using Array as root value for ${
            shallow ? `shallowReactive()` : `reactive()`
          } as it cannot be tracked in watch() or watchEffect(). Use ${
            shallow ? `shallowRef()` : `ref()`
          } instead. This is a Vue-2-only limitation.`
        )
      }
      const existingOb = target && target.__ob__ // 检查目标对象是否已经有响应式对象
      if (existingOb && existingOb.shallow !== shallow) { // 如果目标对象已经有响应式对象，检查它是否和 shallow 参数相同
        warn(
          `Target is already a ${
            existingOb.shallow ? `` : `non-`
          }shallow reactive object, and cannot be converted to ${
            shallow ? `` : `non-`
          }shallow.`
        )
      }
    }
    // // 调用 observe 函数创建响应式对象
    const ob = observe(
      target,
      shallow,
      isServerRendering() /* ssr mock reactivity */
    )
    if (__DEV__ && !ob) {
      // 在开发环境下，如果创建响应式对象失败，发出相应的警告
      if (target == null || isPrimitive(target)) {
        warn(`value cannot be made reactive: ${String(target)}`)
      }
      if (isCollectionType(target)) {
        // 如果目标对象是集合类型（如 Map 或 Set），发出警告，因为 Vue 2 不支持响应式集合类型
        warn(
          `Vue 2 does not support reactive collection types such as Map or Set.`
        )
      }
    }
  }
}

3. defineReactive

defineReactive 函数是 Vue 响应式系统的核心之一，用于定义对象的属性，并在属性的 getter 和 setter 中实现对属性值的观察。接下来将出另篇文章解读传送门