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

目录导航

本节我们的示例代码如下

app组件如下

child组件如下

desp组件如下

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

child组件

    props=['name','nick-name']

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

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

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

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

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

desp组件

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

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

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

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