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
}