feat(runtime-core): 实现挂载组件的时候区分props和attrs

Author: coderwei99

packages/runtime-core/src/component.ts

@@ -30,7 +30,8 @@ export function createComponentInstance(vnode: any, parentComponent: any) {
     provides: parentComponent ? parentComponent.provides : ({} as Record<string, any>), //父组件提供的数据
     parent: parentComponent, //父组件实例
     isMouted: false, //标志组件是否挂载  后续用于判断是更新还是挂载
-    subTree: {},
+    subTree: {}, //子树的虚拟节点
+    propsOptions: type.props || {}, //组件的props选项，在组件内部会通过defineProps来定义props，因为在使用组件的直接绑定属性不一定全都是props
     setupState: {},
     next: null,
     // 生命周期

packages/runtime-core/src/componentProps.ts

@@ -1,4 +1,47 @@
+function resolvePorp(propsOptions, rawprops) {
+  const props = {}
+  const attrs = {}
+  /* 
+    propsOptions{
+      name:{
+        type:String,
+        default:'xxx'
+      },
+      age:{
+        type:Number,
+        default:xxx
+      }
+    }
+
+    rawProps:{
+      name:"coderwei",
+      age:19,
+      number: 95527666,
+      cart: 'bar'
+    }
+  */
+  const keys = Object.keys(propsOptions)
+  if (rawprops) {
+    for (const key in rawprops) {
+      if (keys.includes(key)) {
+        props[key] = rawprops[key]
+      } else {
+        // 作为attrs
+        attrs[key] = rawprops[key]
+      }
+    }
+  }
+
+  return {
+    newprops: props,
+    attrs
+  }
+}
+
 // 初始化props
 export function initProps(instance: any, props: any) {
-  instance.props = props || {}
+  // 这里我们需要对props和attrs进行区分 因为我们创建实例的时候，无论是props 还是attrs 都统一传给h函数的第二个参数 h函数的第二个参数会被统一挂载到props
+  const { newprops, attrs } = resolvePorp(instance.propsOptions, props)
+  instance.props = newprops || {}
+  instance.attrs = attrs || {}
 }

packages/runtime-core/src/renderer.ts

@@ -346,8 +346,10 @@ export function createRenderer(options?) {
     }
 
     // 处理props
-    for (const key of Object.getOwnPropertyNames(props)) {
-      hotPatchProp(el, key, null, props[key])
+    if (props) {
+      for (const key of Object.getOwnPropertyNames(props)) {
+        hotPatchProp(el, key, null, props[key])
+      }
     }
     // 将创建的dom元素添加在父元素
     hotInsert(el, container, anchor)

packages/runtime-core/src/vnode.ts

@@ -9,7 +9,7 @@ export { createVNode as createElementBlock }
 export function createVNode(type, props?, children?) {
   const vnode = {
     type,
-    props: props ?? {},
+    props: props ?? null,
     children,
     component: null,
     key: props && props.key,