Vue中接收没有声明的Prop属性[null/undefined]的接收问题

最近在写基础组件，同事一直反馈说组件总是提示警告：

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Array, got Null

一开始以为是接收的问题，把定义的props加上了工厂函数后没有报异常就没再管了。
今天再去看的时候发现还是有报错，检查了一下组件代码没发现问题，在查看业务代码的时候发现同事喜欢给声明的变量默认赋值为 null。而不是声明正确的基础类型。所以我就想应该如何把这个问题彻底解决掉。

🔔 其实这个提示为了提醒可能你绑定的变量并不一定存在。

可以看到 Vue 官方提供的文档中明确提到了:

null 和 undefined 会通过任何类型验证

但是实际上如果你给 props 属性声明了必填（required） 的话，那么 null 将无法通过类型验证。

尤大也在相关的Issue里面说明了这个情况：

This is because your prop doesn’t have required: true. For optional props, null will bypass the type check.
yyx990803 - Issue #6768 · vuejs/vue

所以要解决我开头的这个问题，只要把 required 声明去掉就可以了。但是如果我确实需要这个属性必填呢，那么就没办法了需要你在父级声明合法默认值或者直接不声明。
因为在没有声明具体属性的时会传入的时 undefined，而 undefined 是会使用预设的默认值的。

👀 尾声

既然提了那么就说一下 null 和 undefined 的一些区别。

首先是如果你声明了属性为必填，那么 null 将无法通过类型校验并且在控制台警告 Invalid prop。

而 undefined 则有些不一样:

如果你设置了默认值，那么将会使用预设的默认值，并且可以通过类型校验。
如果没有设置默认值，那么将无法通过类型校验，并且与 null 一样在控制台提示异常:
```
[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Array, got Undefined
```

按照尤大的原话的话:

null indicates the value is explicitly marked as not present and it should remain null.

undefined indicates the value is not present and a default value should be used if available.

required: true indicates neither null or undefined are allowed (unless a default is used)

从源码层面也可以看到 value === undefined 时才会去获取声明的默认值。

文档资源

#props | API — Vue.js
Prop — Vue.js

VueJS Using Prop Type Validation With NULL and ‘undefined’ Values? - Stack Overflow
Vue Prop中的 null vs undefined_PrinciplesMan的博客-CSDN博客
 No warning when string property value is `null` · Issue #6768 · vuejs/vue
vue的props接收object类型的变量，当该变量为null的时候默认值是不生效的吗？ - SegmentFault 思否
 vue/props.ts at d6bdff890322bc87792094a1690bcd16373cf82d · vuejs/vue