实现初始化element主流程

liuss7 · liuss7 · commit dda7061d9936 · 2022-09-23T20:29:51.000+08:00
diff --git a/example/Helloword/app.js b/example/Helloword/app.js
@@ -2,7 +2,14 @@ import {h} from "../../lib/mini-vue.esm.js"
 
 export const App={
    render(){
-      return h('div',{color:'red'},'你好 mini-vue')
+      return h(
+        'div',
+        {id:'idApp',class:['red','hard']},
+        //string类型
+        // '你好 mini-vue'
+        //数组类型
+        [h('p',{class:'red'},"hi 我是第个p"),h('p',{class:'blue'},'hi,我是第二个p')],
+        )
    },
    setup(){
     return {
diff --git a/example/Helloword/index.html b/example/Helloword/index.html
@@ -6,6 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
+<style>
+    .red{
+        color: red;
+    }
+    .blue{
+        color: blue;
+    }
+</style>
 <body>
     
     <div id="app"></div>
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,16 +1,16 @@
 
 import typescript from "@rollup/plugin-typescript"
-
+import pkg from "./package.json"
 export default {
   input:'./src/index.ts',
   output:[
     {
       format:"cjs",
-      file:'lib/mini-vue.cjs.js'
+      file:"lib/mini-vue.cjs.js"
     },
     {
       format:"es",
-      file:'lib/mini-vue.esm.js'
+      file:"lib/mini-vue.esm.js"
     }
   ],
   plugins:[
diff --git a/src/runtime-core/component.ts b/src/runtime-core/component.ts
@@ -6,7 +6,7 @@ export function createComponentInstance(vnode: any) {
     type: vnode.type
   }
   console.log("===返回组件实例===",component);
-  return component
+  return component;
 }
 export function setupComponent(instance) {
   console.log("===初始化组件实例对象===",instance);
@@ -40,7 +40,7 @@ function handleSetupResult(instance: any, setupResult: any) {
 function finishComponentSetup(instance: any) {
   console.log("====finishComponentSetup=====");
   
-  const component = instance.type
-  instance.render = component.render
+  const component = instance.type;
+  instance.render = component.render;
 }
 
diff --git a/src/runtime-core/h.ts b/src/runtime-core/h.ts
@@ -2,4 +2,3 @@ import { createVNode } from "./vnode"
 export function h(type: any,props?: any,children?: any){
   return createVNode(type,props,children)
 }
-//ceshi
diff --git a/src/runtime-core/render.ts b/src/runtime-core/render.ts
@@ -1,52 +1,72 @@
 
 import { createComponentInstance, setupComponent } from "./component"
-
+import { isObject } from "../shared/index"
 export function render(vnode, rootContainer) {
   console.log('===render执行挂载逻辑===');
   //执行挂载逻辑
-  path(vnode,rootContainer)
+  path(vnode, rootContainer)
 }
 //挂载逻辑
 function path(vnode, rootContainer) {
   //判断是不是DOM元素是DOM元素就处理DOM是组件就处理组件
-console.log('===path根据type类型的不同来处理不同类型的vnode===');
+  console.log('===path根据type类型的不同来处理不同类型的vnode===');
 
   let { type } = vnode
   if (typeof type == "string") {
     //todo 处理 element 类型
     processElement(vnode, rootContainer)
-  } else if (typeof type ==="object") {
+  } else if (isObject(type)) {
     //todo 处理 component 类型
     processComponent(vnode, rootContainer)
   }
 }
 //处理DOM类型函数
 function processElement(vnode: any, rootContainer: any) {
+  // todo分为初始化过程和更新逻辑
   console.log("=== processElement  处理element 类型===");
-  
-  mountElement(vnode,rootContainer)
-  
+  //初始化逻辑
+  mountElement(vnode, rootContainer)
+
 }
 //挂载DOM
-function mountElement(vnode:any,rootContainer:any) {
-  let {type,props,children}=vnode;
-  let divType=document.createElement(type);
-  divType.innerHTML=children
-  rootContainer.appendChild(divType)
-  console.log("divType",divType,vnode,rootContainer);
-  
+function mountElement(vnode: any, rootContainer: any) {
+  let { type, props, children } = vnode;
+  //todo children分两种情况 一种是string类型 一种是数组类型
+  let el = document.createElement(type);
+  if (Array.isArray(children)) {
+    //因为children里面每一个都是虚拟节点还需要调用path函数
+    mountChildren(children,el)
+  } else {
+    el.textContent = children;
+  }
+  //处理props
+  for (const key in props) {
+    //拿到props中的属性值
+    const val = props[key]
+    //设置DOM元素的属性
+    el.setAttribute(key, val)
+  }
+  rootContainer.appendChild(el)
+  console.log("divType", el, vnode, rootContainer);
+
+}
+//处理children
+function mountChildren(children,el){
+  children.forEach(v => {
+    path(v, el)
+  })
 }
 //处理组件函数
 function processComponent(vnode: any, rootContainer: any) {
-  console.log("===processComponent  处理组件类型函数我是组件对象====",vnode);
+  console.log("===processComponent  处理组件类型函数我是组件对象====", vnode);
   mountComponent(vnode, rootContainer)
 }
 //挂载组件
 function mountComponent(vnode: any, rootContainer: any) {
   //拿到组件实例
   const instance = createComponentInstance(vnode);
-  console.log("===拿到组件实例对象===",instance);
-  
+  console.log("===拿到组件实例对象===", instance);
+
   //传入件实例 初始化组件
   setupComponent(instance);
   setupRenderEffect(instance, rootContainer)

Original file line number	Diff line number	Diff line change
`@@ -1,16 +1,16 @@`
`1`	`1`
`2`	`2`	`import typescript from "@rollup/plugin-typescript"`
`3`		`-`
	`3`	`+import pkg from "./package.json"`
`4`	`4`	`export default {`
`5`	`5`	`input:'./src/index.ts',`
`6`	`6`	`output:[`
`7`	`7`	`{`
`8`	`8`	`format:"cjs",`
`9`		`- file:'lib/mini-vue.cjs.js'`
	`9`	`+ file:"lib/mini-vue.cjs.js"`
`10`	`10`	`},`
`11`	`11`	`{`
`12`	`12`	`format:"es",`
`13`		`- file:'lib/mini-vue.esm.js'`
	`13`	`+ file:"lib/mini-vue.esm.js"`
`14`	`14`	`}`
`15`	`15`	`],`
`16`	`16`	`plugins:[`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ export function createComponentInstance(vnode: any) {`
`6`	`6`	`type: vnode.type`
`7`	`7`	`}`
`8`	`8`	`console.log("===返回组件实例===",component);`
`9`		`- return component`
	`9`	`+ return component;`
`10`	`10`	`}`
`11`	`11`	`export function setupComponent(instance) {`
`12`	`12`	`console.log("===初始化组件实例对象===",instance);`
`@@ -40,7 +40,7 @@ function handleSetupResult(instance: any, setupResult: any) {`
`40`	`40`	`function finishComponentSetup(instance: any) {`
`41`	`41`	`console.log("====finishComponentSetup=====");`
`42`	`42`
`43`		`- const component = instance.type`
`44`		`- instance.render = component.render`
	`43`	`+ const component = instance.type;`
	`44`	`+ instance.render = component.render;`
`45`	`45`	`}`
`46`	`46`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,3 @@ import { createVNode } from "./vnode"`
`2`	`2`	`export function h(type: any,props?: any,children?: any){`
`3`	`3`	`return createVNode(type,props,children)`
`4`	`4`	`}`
`5`		`-//ceshi`