分析 Vue 3 源码中 `props` 的校验和默认值处理机制。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，老司机要开车啦！今天咱就来扒一扒 Vue 3 源码里 props 这玩意儿的底裤，看看它怎么校验你传的数据，又怎么给你安排默认值。放心，绝对通俗易懂，比你前女友还温柔。

一、Props：Vue 组件的“身份证”

在 Vue 组件中，props 就像组件的身份证，它定义了组件可以接收哪些外部数据，以及这些数据的类型、是否必须、默认值等等。有了 props，组件才能和其他组件或父组件进行交流，实现数据的传递和共享。

二、Props 的定义方式：对象和数组

Vue 3 提供了两种定义 props 的方式：

对象方式 (Object-based syntax): 这种方式更强大，可以详细指定每个 prop 的类型、校验规则、默认值等。

const MyComponent = {
  props: {
    message: {
      type: String,
      required: true,
      default: 'Hello, world!',
      validator: (value) => {
        return value.length > 5;
      }
    },
    age: {
      type: Number,
      default: 18
    },
    userInfo: {
        type: Object,
        default: () => ({ name: 'defaultName', age: 20 })
    }
  },
  template: '<div>{{ message }} - {{ age }}</div>'
}

数组方式 (Array-based syntax): 这种方式比较简单，只能指定 prop 的名称，不能进行类型校验和其他配置。适用于简单的场景。
```
const MyComponent = {
  props: ['message', 'age'],
  template: '<div>{{ message }} - {{ age }}</div>'
}
```
不过，一般情况下，我们都推荐使用对象方式，因为它提供了更强大的功能和更好的可维护性。

三、Props 校验的灵魂：validateProp 函数

Props 校验的核心逻辑位于 packages/runtime-core/src/componentProps.ts 文件中的 validateProp 函数。这个函数就像一个严格的门卫，负责检查传入的 prop 值是否符合组件定义的规范。

简单来说，validateProp 会做以下几件事：

检查类型 (Type Check): 验证 prop 的类型是否与声明的类型一致。Vue 支持的类型包括 String, Number, Boolean, Array, Object, Date, Function, Symbol 等。
检查是否必须 (Required Check): 如果 prop 被标记为 required: true，则必须提供该 prop 的值，否则会发出警告。
执行自定义校验器 (Custom Validator): 如果 prop 定义了 validator 函数，则会调用该函数进行自定义校验。

让我们来看看 validateProp 函数的简化版（省略了一些细节和错误处理）：

function validateProp(
  options: Object, // props 选项
  key: string,      // prop 的 key
  value: any,      // prop 的值
  instance: ComponentInternalInstance | null, // 组件实例
  type: PropType<any> | null = null // prop 的类型
) {
  const { type: expectedTypes, required, validator } = options;

  // 1. 类型检查
  if (expectedTypes) {
    const valid = isValidType(value, expectedTypes); // 稍后解释
    if (!valid) {
      warnInvalidType(key, value, expectedTypes); // 发出类型错误警告
    }
  }

  // 2. 检查是否必须
  if (required && value == null) {
    warnMissingRequired(key); // 发出缺少 required prop 的警告
  }

  // 3. 执行自定义校验器
  if (validator && !validator(value)) {
    warnInvalidValidator(key, value); // 发出自定义校验器失败的警告
  }
}

四、类型检查的秘密武器：isValidType 函数

isValidType 函数是类型检查的核心，它负责判断一个值是否符合指定的类型。这个函数会处理各种类型的情况，包括基本类型、数组类型、自定义类型等等。

function isValidType(value: any, expectedTypes: PropType<any> | PropType<any>[]): boolean {
  if (Array.isArray(expectedTypes)) {
    return expectedTypes.some(type => isValidType(value, type)); // 递归检查
  }

  const expectedType = expectedTypes as PropType<any>;
  const typeName = getType(expectedType); // 获取类型名称

  if (typeName === 'String') {
    return typeof value === 'string';
  } else if (typeName === 'Number') {
    return typeof value === 'number';
  } else if (typeName === 'Boolean') {
    return typeof value === 'boolean';
  } else if (typeName === 'Function') {
    return typeof value === 'function';
  } else if (typeName === 'Object') {
    return isObject(value); //  检查是否为对象
  } else if (typeName === 'Array') {
    return Array.isArray(value);
  } else if (typeName === 'Symbol') {
    return typeof value === 'symbol';
  } else if (typeName === 'Date') {
    return value instanceof Date;
  } else {
    return value instanceof expectedType; // 检查是否为自定义类型
  }
}

// 获取类型名称
function getType(fn: any): string {
  const match = fn && fn.toString().match(/^s*function (w+)/);
  return match ? match[1] : '';
}

五、默认值的奥秘：resolvePropValue 函数

当父组件没有传递某个 prop 的值时，Vue 会使用默认值。默认值的处理逻辑位于 packages/runtime-core/src/componentProps.ts 文件中的 resolvePropValue 函数。

resolvePropValue 函数会根据 prop 的定义，返回合适的默认值。需要注意的是，如果 prop 的默认值是一个函数，则会调用该函数来获取默认值，这样可以避免多个组件实例共享同一个对象，从而导致数据污染。

function resolvePropValue(options: Object, key: string, value: any, instance: ComponentInternalInstance | null) {
  const { default: defaultValue, type } = options;

  if (defaultValue !== undefined) {
    const shouldCall =
      typeof defaultValue === 'function' && type !== Function; // 避免将函数作为默认值
    const value = shouldCall
      ? callWithAsyncErrorHandling(
          defaultValue,
          instance,
          ErrorCodes.SETUP_DEFAULT_VALUE
        )
      : defaultValue;
    return value;
  }

  return undefined;
}

六、Props 校验和默认值处理的流程

现在，让我们把这些碎片拼起来，看看 Vue 3 在处理 props 时，都做了些什么：

组件初始化： 在组件初始化时，Vue 会解析组件的 props 选项，生成一个 props 对象。
接收 Props： 当父组件向子组件传递 props 时，Vue 会将这些值存储到子组件的 props 对象中。
校验 Props： Vue 会遍历 props 对象，对每个 prop 调用 validateProp 函数进行校验。如果 prop 的值不符合规范，则会发出警告。
设置默认值： 如果父组件没有传递某个 prop 的值，并且该 prop 定义了默认值，则 Vue 会调用 resolvePropValue 函数获取默认值，并将其设置到子组件的 props 对象中。
响应式处理： Vue 会将 props 对象转换为响应式对象，这样当 props 的值发生变化时，组件可以自动更新。

七、Props 校验和默认值处理的例子

为了更好地理解 props 的校验和默认值处理机制，我们来看几个具体的例子：

例 1：类型校验

const MyComponent = {
  props: {
    name: {
      type: String,
      required: true
    },
    age: Number
  },
  template: '<div>{{ name }} - {{ age }}</div>'
}

如果父组件传递的 name 不是字符串，或者没有传递 name，Vue 会发出警告。如果父组件传递的 age 不是数字，Vue 也会发出警告。

例 2：自定义校验器

const MyComponent = {
  props: {
    email: {
      type: String,
      validator: (value) => {
        return /^[^s@]+@[^s@]+.[^s@]+$/.test(value); // 简单的邮箱验证
      }
    }
  },
  template: '<div>{{ email }}</div>'
}

如果父组件传递的 email 不符合邮箱格式，Vue 会发出警告。

例 3：默认值

const MyComponent = {
  props: {
    message: {
      type: String,
      default: 'Hello, world!'
    },
    count: {
      type: Number,
      default: 0
    },
    userInfo: {
        type: Object,
        default: () => ({ name: 'defaultName', age: 20 })
    }
  },
  template: '<div>{{ message }} - {{ count }} - {{userInfo.name}}</div>'
}

如果父组件没有传递 message，则组件会显示 "Hello, world!"。如果父组件没有传递 count，则组件会显示 0。如果父组件没有传递 userInfo，则组件会显示 "defaultName"。注意 userInfo 是object类型，需要通过函数返回，避免多个组件实例共享同一个对象。

八、Props 校验和默认值处理的意义

props 校验和默认值处理机制对于 Vue 组件的开发至关重要，它可以带来以下好处：

提高代码质量： 通过类型校验，可以避免因类型错误导致的问题，提高代码的健壮性。
增强组件的可维护性： 通过明确定义 props 的类型和默认值，可以使组件的接口更加清晰，方便其他开发者使用和维护。
减少错误： 通过自定义校验器，可以对 props 的值进行更严格的校验，避免因数据不合法导致的问题。
避免共享对象： 通过将object类型的default值设置为函数，避免多个组件实例共享同一个对象，保证数据独立性。

九、总结

今天，我们深入探讨了 Vue 3 源码中 props 的校验和默认值处理机制。希望通过这次“扒底裤”式的讲解，你对 props 的理解更加深刻，能够更好地利用 props 来开发高质量的 Vue 组件。记住，props 就像组件的身份证，一定要认真对待，规范使用！

下次有机会，我们再来聊聊 Vue 3 源码里的其他有趣的东西。拜了个拜！

发表回复 取消回复

发表回复取消回复