init

Author: coderzyq

Mini-Vue实现/index.html

@@ -0,0 +1,48 @@
+//h函数，用于返回一个VNode对象
+const h = (tag, props, children) => {
+    //vnode -> javascript对象 -> {}
+    return {
+        tag,
+        props,
+        children
+    }
+}
+
+//mount函数，用于将VNode对象挂载到DOM上
+const mount = (vnode, container) => {
+    //vnode -> element
+    //1.创建出真实的原生，并且在vnode上保留element
+    const element = vnode.el = document.createElement(vnode.tag)
+
+    //2.处理props
+    if (vnode.props) {
+        for (const key in vnode.props) {
+            const value = vnode.props[key]
+
+            if (key.startsWith("on")) {
+                element.addEventListener(key.slice(2).toLocaleLowerCase(), value)
+            } else {
+                element.setAttribute(key, value)
+            }
+        }
+    }
+
+    //3.处理children
+    if (vnode.children) {
+        if (typeof vnode.children === 'string') {
+            element.textContent = vnode.children
+        } else {
+            vnode.children.forEach(item => {
+                mount(item, element)
+            })
+        }
+    }
+
+    //4.将el挂载带container上
+    container.appendChild(element)
+}
+
+//pathch函数，用于对两个VNode进行对比，决定如何处理新的VNode
+const patch = (n1, n2) => {
+
+}

Mini-Vue实现/index.js

@@ -1,2 +1,14 @@
 # Mini-Vue3
 mini版的uve3框架
+
+## 实现一个简约版的Mini-Vue3框架
+该框架主要包括三部分：
+1、**渲染系统模块**
+2、**可响应式系统模块**
+3、**应用程序入口模块**
+
+### 渲染系统模块实现
+**渲染系统模块主要包含三个功能：**
+1.功能一：h函数，用于返回一个VNode对象
+2.功能二：mount函数，用于将VNode对象挂载到DOM上
+3.功能三：pathch函数，用于对两个VNode进行对比，决定如何处理新的VNode