【Vue】Vue 的 Props 如何初始化

1.为什么props在html模板中要使用kebab-case (短横线分隔命名)，而在Vue的options里面声明props却要用camelCase (驼峰命名法)？
2.Vue中是如何初始化props属性的？

HTML层面：

代码层面：

在_init初始化过程中，如果Vue实例有props属性时候，会对props的属性进行遍历操作，把props里的内容（数组、对象）变成Vue实例的props对象中的属性

比如：
props：[beginDate]
会变成
props[beginDate] = {type:null}

props：{a:{name:‘luo’}} 或 props:{name}
会变成
props[a] = {name:‘luo’} 或 props[name] = {type:null}

相关代码：

src\core\instance\init.js 中的 _init 方法：当判断是Vue实例时候进入到mergeOptions方法中

mergeOptions在src\core\util\options.js中进行实现
normalizeProps方法则是格式化option中的props

normalizeProps 函数实现如下

function normalizeProps (options: Object, vm: ?Component) {
  const props = options.props
  if (!props) return
  const res = {}
  let i, val, name
  // 根据props是数组还是对象形式进行不同的遍历处理，都是返回一个res对象
  // camelize 转换props属性名字，把连接字符串形式转换成驼峰式命名
  // isPlainObject 判断是否是对象，返回true or false
  if (Array.isArray(props)) {
    i = props.length
    while (i--) {
      val = props[i]
      if (typeof val === 'string') {
        name = camelize(val)
        res[name] = { type: null }
      } else if (process.env.NODE_ENV !== 'production') {
        warn('props must be strings when using array syntax.')
      }
    }
  } else if (isPlainObject(props)) {
    for (const key in props) {
      val = props[key]
      name = camelize(key)
      res[name] = isPlainObject(val)
        ? val
        : { type: val }
    }
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `Invalid value for option "props": expected an Array or an Object, ` +
      `but got ${toRawType(props)}.`,
      vm
    )
  }
  // 处理后的props重新赋值回Vue实例的options.props对象上
  options.props = res
}