feat(runtime): 添加H函数组件示例和数组子节点标记支持

- 新增h-component.html示例文件展示直接创建虚拟DOM节点 - 在vnode.ts中为数组子节点添加ShapeFlags.ARRAY_CHILDREN标记 - 实现了绕过h函数直接构建组件虚拟节点的演示功能
2026-02-27 17:35:51 +08:00
parent 4225ae0b8f
commit 61edc322f2
2 changed files with 39 additions and 0 deletions
--- a/packages/vue/examples/runtime/h-component.html
+++ b/packages/vue/examples/runtime/h-component.html
@@ -0,0 +1,38 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <script src="../../dist/vue.js"></script>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script>
+    const { h, render } = Vue
+    const component = {
+        render() {
+            // const vnode1=h('div','这是一个component')
+            // console.log(vnode1);
+            // return vnode1
+
+            //直接利用当前打印的vnode , 绕过h的渲染
+            return {
+                "__v_isVNode": true,
+                "type": 'div',
+                "children": '这是一个component',
+                "shapeFlag": 9
+            }
+        }
+    }
+    // const vnode2=h(component)
+    // console.log(vnode2);
+
+    const vnode2 = {
+        "__v_isVNode": true,
+        "shapeFlag": 4,
+        "type": component
+    }
+    render(vnode2, document.querySelector('#app'))
+</script>
+</html>