vue源码分析(一)>>: props
今天记录一下研究props流程，由于工作需要，研究了几天vue实现props方式，为了看props是什么时候将驼峰命名或者羊肉串命名转化成子组件props中统一的驼峰命名的，如下图：
带着这个问题我一顿看呀，看到最后也没看到是什么时候转化的，因为一开始就想错了，并不是dataProps或者data-props转成dataProps了，而是子组件拿着props里边的dataProps，通过一个方法把字符串转换成data-props然后去匹配<hello>的attrs里边的属性，如果匹配到了，就将值123赋值过来，然后将<hello>attrs里边该条数据(属性)删除了 ，所以F12你会看到，渲染后p标签上还有dataProps这个属性只不过被变成dataprops了，但是data-props这个属性已经不存在了，就是这个原因。
看到这里可能有人会笑我，人家说了推荐羊肉串写法，但是驼峰也是支持的呀，官网确实是这样说的，但我测试确实驼峰不行，这怎么回事？原来文档上指的是.vue文件，就是说脚手架搭起来的项目，html里边引入vuejs这种不行。原因是.vue文件通过vue-loader编译过一遍，将dataProps编译成data-props了。
以上研究结果满足工作了，接下来将源码分析一遍，方便以后复习，也加深自己的印象。
step1：当用户声明组件时候，即Vue.component()时候，调用Vue.extend()。在这里规范了一下组件相关的东西，校验组件名字合理不合理，合并一下options，initProps$1,然后对每一个props执行proxy方法设置代理；然后对每个computed执行defineComputed给她defineProperty，这里主要看一下合并options；
function mergeOptions ( parent, child, vm ) { debugger console.log('mergeOptions :parent>> ', parent); console.log('mergeOptions :child>> ', child); console.log('mergeOptions :vm>> ', vm); { // 校验子组件的组件 checkComponents(child); } if (typeof child === 'function') { child = child.options; } // 检查props合法性 合法化props // 你用数组定义的props也会转化成对象形式 // 用非驼峰命名也会转化成驼峰命名 normalizeProps(child, vm); //格式化Inject normalizeInject(child, vm); //格式化Directives normalizeDirectives(child); // Apply extends and mixins on the child options, // but only if it is a raw options object that isn't // the result of another mergeOptions call. // Only merged options has the _base property. // 如果有_base属性，就合并继承和混入 if (!child._base) { if (child.extends) { parent = mergeOptions(parent, child.extends, vm); } if (child.mixins) { for (var i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm); } } } var options = {}; var key; for (key in parent) { mergeField(key); } for (key in child) { if (!hasOwn(parent, key)) { mergeField(key); } } // 继承合并属性 function mergeField (key) { var strat = strats[key] || defaultStrat; options[key] = strat(parent[key], child[key], vm, key); } return options }
normalizeProps方法如下：
function normalizeProps (options, vm) { console.log('options :>> ', options); var props = options.props; if (!props) { return } var res = {}; var i, val, name; if (Array.isArray(props)) {// 是数组 i = props.length; while (i--) { val = props[i]; if (typeof val === 'string') {//必须是字符串 name = camelize(val);// 转化成驼峰 res[name] = { type: null }; } else { warn('props must be strings when using array syntax.'); } } } else if (isPlainObject(props)) {// 是对象 for (var key in props) { val = props[key]; name = camelize(key); res[name] = isPlainObject(val) ? val : { type: val };// 不是对象也转对象 } } else { warn( "Invalid value for option \"props\": expected an Array or an Object, " + "but got " + (toRawType(props)) + ".", vm ); } console.log('res :>---> ', res); options.props = res; }
就是说你还没有用组件只是创建了个组件，他会做这么多的操作。
step2：接下来再看测createElement方法，然后走_createElement方法，然后主要看createComponent方法，里面有这么一行：
// extract props 提取props var propsData = extractPropsFromVNodeData(data, Ctor, tag);
继续跟踪往下看
/* * 根据组件上的属性集合 和定义的组件内的prop集合 实现值传递 即赋值操作 */ function extractPropsFromVNodeData ( data,// 组件上的属性集合 Ctor, // 组件对象 tag // 组件名称 ) { console.log('-------------------6----------------'); // we are only extracting raw values here. // validation and default values are handled in the child // component itself. var propOptions = Ctor.options.props; if (isUndef(propOptions)) {// 是不是undefind return } var res = {}; var attrs = data.attrs; var props = data.props; if (isDef(attrs) || isDef(props)) {//是不是undefind for (var key in propOptions) { var altKey = hyphenate(key);//字符串驼峰转羊肉串 { var keyInLowerCase = key.toLowerCase();//直接大写转成小写 if ( key !== keyInLowerCase && attrs && hasOwn(attrs, keyInLowerCase) ) { tip( "Prop \"" + keyInLowerCase + "\" is passed to component " + (formatComponentName(tag || Ctor)) + ", but the declared prop name is" + " \"" + key + "\". " + "Note that HTML attributes are case-insensitive and camelCased " + "props need to use their kebab-case equivalents when using in-DOM " + "templates. You should probably use \"" + altKey + "\" instead of \"" + key + "\"." ); } } checkProp(res, props, key, altKey, true) || checkProp(res, attrs, key, altKey, false);// --- 7 } } return res }
然后再看checkProp
// 校验prop 如果定义的组件内有prop属性 赋值然后删除调用组件的属性 function checkProp ( res, hash, key, altKey, preserve ) { console.log('-------------------7----------------'); if (isDef(hash)) { if (hasOwn(hash, key)) { res[key] = hash[key]; if (!preserve) { delete hash[key]; } return true } else if (hasOwn(hash, altKey)) { res[key] = hash[altKey]; // 赋值 if (!preserve) { delete hash[altKey];// 删除 } return true } } return false }
这里就是说，实例中拿着props里边的key去调用者的attrs上匹配，先匹配正常的，找不到再去匹配转成羊肉串的，一旦匹配成功，就将值赋值过来，然后将调用者对象attrs里边关于本属性删除了
step3：然后关注initState，这里可以看到函数执行顺序，钩子函数调用；
Vue.prototype._init = function (options?: Object) {
。。。
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)// 初始化数据相关
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
。。。
}
然后看initState方法，先不看其他的，只关注props相关的：
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)// 初始化props
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
然后进入到initPrpos方法里：这里操作的东西就多了，遍历组件props里边的属性，一个一个的赋值，并且加上getter和setter方法
function initProps (vm: Component, propsOptions: Object) {
const propsData = vm.$options.propsData || {}
const props = vm._props = {}
// cache prop keys so that future props updates can iterate using Array
// instead of dynamic object key enumeration.
const keys = vm.$options._propKeys = []
const isRoot = !vm.$parent
// root instance props should be converted
if (!isRoot) {
toggleObserving(false)
}
// 这里的propsOptions就是vm.$options.props也就是组件里props的value
for (const key in propsOptions) {
keys.push(key)
//校验prop值 返回传过来的值 或者默认值
const value = validateProp(key, propsOptions, propsData, vm)
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
const hyphenatedKey = hyphenate(key)
if (isReservedAttribute(hyphenatedKey) ||
config.isReservedAttr(hyphenatedKey)) {
warn(
`"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
vm
)
}
defineReactive(props, key, value, () => {
if (!isRoot && !isUpdatingChildComponent) {
warn(
`Avoid mutating a prop directly since the value will be ` +
`overwritten whenever the parent component re-renders. ` +
`Instead, use a data or computed property based on the prop's ` +
`value. Prop being mutated: "${key}"`,
vm
)
}
})
} else {
// 添加defineProperty geter seter那一套东西
defineReactive(props, key, value)
}
// static props are already proxied on the component's prototype
// during Vue.extend(). We only need to proxy props defined at
// instantiation here.
if (!(key in vm)) {
proxy(vm, `_props`, key)
}
}
toggleObserving(true)
}
再看看valiateProp方法：
/**
* 校验prop
* key 要校验的prop的key
* propOptions 定义的props对象
* propsData 调用者传进来的props对象
* vm 组件实例对象
*/
export function validateProp (
key: string,
propOptions: Object,
propsData: Object,
vm?: Component
): any {
const prop = propOptions[key]
//判断propsData有没有key这个属性，换句话说就时组件定义的props调用者有没有传进来
const absent = !hasOwn(propsData, key)
let value = propsData[key]
// 判断定义的prop类型是不是Boolean
const booleanIndex = getTypeIndex(Boolean, prop.type)
if (booleanIndex > -1) {
// 用户也没有传值 也没有定义default值 那就给你按false整
if (absent && !hasOwn(prop, 'default')) {
value = false
} else if (value === '' || value === hyphenate(key)) {
// 传进来的值时空的， 或者 value和key转成羊肉串命名一样
// 定义prop时候还定义了其它类型
const stringIndex = getTypeIndex(String, prop.type)
if (stringIndex < 0 || booleanIndex < stringIndex) {
// 就是说 调用的地方传递了空值 (类似于checked disabled等类似)；接收的地方只定义了是Boolean类型，那value就是true；或者定义了String类型但是Boolean写在了String之前，那也是true
value = true
}
}
}
// check default value
if (value === undefined) {
// 获取默认值
value = getPropDefaultValue(vm, prop, key)
// since the default value is a fresh copy,
// make sure to observe it.
const prevShouldObserve = shouldObserve
toggleObserving(true)
observe(value)
toggleObserving(prevShouldObserve)
}
if (
process.env.NODE_ENV !== 'production' &&
// skip validation for weex recycle-list child component props
!(__WEEX__ && isObject(value) && ('@binding' in value))
) {
assertProp(prop, key, value, vm, absent)
}
return value
}
这个流程是vue初始化时候props整体过程
最后总结一下就是：当你创建一个组件，底层会给你把组件的props属性规范化，将数组形式定义的props转化成对象形式，将非驼峰命名的转化成驼峰命名；然后创建vnode时候将调用者attrs里边对应的prop剪切到组件实例上；然后初始化状态时候，将值一个个挂载，设置默认值，添加数据劫持等操作。
over！
