vue源码解读--props（规范化）

本节我们的示例代码如下

app组件如下

child组件如下

desp组件如下

在组件init过程中会执行mergeOptions，在这一过程中会调用normalizeProps做一些props相关的规范化处理

$\bullet$ child组件

$\star$ props=['name','nick-name']

$\star$ 定义res，这将作为最终规范化后的键值对对象替代原先的props

$\star$ 当前是数组，进入if判断，执行while循环

$\star$ 分别拿到数组的两个成员，执行驼峰化处理。即name => name；nick-name=》nickName

$\star$ 将转化后的name和nickName作为对象的键存入，值统一为{type:null},这是为了在初始化过程中与对象形式的props统一以方便处理

$\star$ 最后覆盖掉原来组件上挂载的props，即['name','nick-name'] => {name:{type:null},nickName:{type:null}}

$\bullet$ desp组件

$\star$ props={age:Number,sex:{type:String,default:"男",validate(value){return value === '男' || value === '女'}}

$\star$ 当前是对象，进入else逻辑，执行for循环

$\star$ 拿到key进行驼峰化处理，如果是对象的化直接挂载到res上，如果不是对象如age的情况，则将其转换成值为{type:String}

$\star$ 最后覆盖掉原来组件上挂载的props

最后编辑于：2021.03.15 22:41:48