Vue3源码分析组件挂载初始化props与slots_vue.js_

function setupComponent(instance) { //获取vnode的props(真正传递的props) const { props, children } = instance.vnode; //判断当前是否是有状态组件组件 const isStateful = isStatefulComponent(instance); //通过传递的真实props和声明的props 分离组件参数 //组件参数放入props中 其余放入instance.attrs //处理了props的default情况等 initProps(instance, props, isStateful); //初始化插槽 initSlots(instance, children); //验证名称是否合法,components中的组件名称是否 //合法,代理instance.ctx,创建setup函数的ctx,调用setup函数 //处理得到的结果 const setupResult = isStateful ? setupStatefulComponent(instance) : undefined; return setupResult; } 

function isStatefulComponent(instance) { return instance.vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT; } 

function initProps(instance, rawProps, isStateful) { //定义需要放入的 const props = {}; const attrs = {}; //attrs.__vInternal = 1 shared.def(attrs, InternalObjectKey, 1); //创建propsDefaults instance.propsDefaults = Object.create(null); //将真实传递的props分配给instance的props和attrs setFullProps(instance, rawProps, props, attrs); //遍历normalized(合并和的props) for (const key in instance.propsOptions[0]) { if (!(key in props)) { props[key] = undefined; } } //最后将分配好的props和attrs赋值到instance if (isStateful) { instance.props = reactivity.shallowReactive(props); } else { //不存在type.props则让props为attrs if (!instance.type.props) { instance.props = attrs; } else { instance.props = props; } } instance.attrs = attrs; } 

function setFullProps(instance, rawProps, props, attrs) { //获取通过mixins和extends合并的props const [options, needCastKeys] = instance.propsOptions; let hasAttrsChanged = false; //attrs是否发生改变 let rawCastValues; if (rawProps) { for (let key in rawProps) { //如果key是"ref" "key" "ref_for" "ref_key" //"onVnodeBeforeMount" "onVnodeMounted" //"onVnodeBeforeUpdate "onVnodeUpdated" //"onVnodeBeforeUnmount" "onVnodeUnmounted" //那么就跳过 if (shared.isReservedProp(key)) { continue; } //获取rawProps:{a:1}=>value=1 const value = rawProps[key]; let camelKey; //小驼峰式的key if ( options && shared.hasOwn(options, (camelKey = shared.camelize(key))) ) { //这个key不是含有default属性的 if (!needCastKeys || !needCastKeys.includes(camelKey)) { props[camelKey] = value; } //props:{"msg":{default:"a"}} //含有default属性的放入rawCastValues中 else { (rawCastValues || (rawCastValues = {}))[camelKey] = value; } } //判断当前的key是否是用于emits的 else if (!isEmitListener(instance.emitsOptions, key)) { //不是emit自定义事件的key也不是组件参数那么就是attrs if (!(key in attrs) || value !== attrs[key]) { attrs[key] = value; hasAttrsChanged = true; } } } } /** * * 这里涉及到四个属性instance, rawProps, props, attrs * instance:是当前组件的实例 * rawProps:真正传递的props可能含有组件参数props, * 标签属性attrs,自定义emit事件 * props:代表声明并且接受到的props * attrs:代表没有声明props也不属于emits属性的属性 * needCastKeys:代表需要特殊处理的属性 * 例如props:{msg:{default:"a"}}那么msg会被放入 * needCastKeys中 * */ if (needCastKeys) { //获取非响应式的props const rawCurrentProps = reactivity.toRaw(props); const castValues = rawCastValues || {}; for (let i = 0; i < needCastKeys.length; i++) { const key = needCastKeys[i]; //msg //对于有default的属性进行重设 //props:{msg:{default:"a"}} props[key] = resolvePropValue( options, //合并mixins和extends后的props(定义方) rawCurrentProps, //非响应式的props(接受方) key, //(含有default)的key "msg" //例如传递了"msg":1 定义了:props:{msg:{default:"a"}} //castValues[key]=1 castValues[key], instance, //实例 !shared.hasOwn(castValues, key) ); } } return hasAttrsChanged; } 

function resolvePropValue(options, props, key, value, instance, isAbsent) { //获取{msg:{default:"a"}}中的{default:"a"} const opt = options[key]; if (opt != null) { //判断是否有default属性 const hasDefault = shared.hasOwn(opt, "default"); //如果定义了default但是没有接受到value值 if (hasDefault && value === undefined) { const defaultValue = opt.default; //如果需要接受的类型不是函数,但是接受到了函数 //看看实例的propsDefaults是否有当前key的值 //还是没有则调用这个defaultValue函数取得值 if (opt.type !== Function && shared.isFunction(defaultValue)) { const { propsDefaults } = instance; if (key in propsDefaults) { value = propsDefaults[key]; } else { //包裹是为了在调用这个函数的时候 //获取当前实例不会出错 setCurrentInstance(instance); value = propsDefaults[key] = defaultValue.call(null, props); unsetCurrentInstance(); } } //设置为默认值 else { value = defaultValue; } } //需要接受的类型是Boolean if (opt[0]) { //没有设置默认值,也没有传递这个值则为false if (isAbsent && !hasDefault) { value = false; } //并且声明了yes则设置为true else if (opt[1] && value === "") { value = true; } } } return value; } 

function initSlots(instance, children) { //判断当前实例的children是否是slots if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) { const type = children._; //获取shapeSlots //有"_"标识表示是通过compiler编译得到的 if (type) { //如果有SLOTS_CHILDREN标识 表示children就是slots属性 instance.slots = reactivity.toRaw(children); //将_属性变为不可枚举属性 shared.def(children, "_", type); } else { /** * render(){ * return h(Comp,null,{ * default:()=>h("div",null), * header:()=>h("div",null) * }) * } * 没有则表示用户自己写了render函数 * 这个时候用户可能不会添加"_"属性 * 所以需要对slots进行标准化 */ normalizeObjectSlots(children, (instance.slots = {})); } } else { instance.slots = {}; //如果children为字符串或者null或数组情况 if (children) { normalizeVNodeSlots(instance, children); } } //标识slots为内部属性 shared.def(instance.slots, InternalObjectKey, 1); }