feat(runtime): 支持对象类型的组件创建

- 在 vnode.ts 中引入 isObject 判断函数 - 修改 createVNode 函数支持对象类型组件的 shapeFlag 设置 - 更新 h-component.html 示例代码，使用 h 函数创建组件 - 新增 h-component-video-test.html 测试文件包含原始 vnode 创建方式 - 移除手动创建 vnode 对象的硬编码方式，统一使用 h 函数创建
2026-02-27 20:01:20 +08:00
parent 61edc322f2
commit 6aa564ef7c
3 changed files with 56 additions and 22 deletions
--- a/packages/vue/examples/runtime/h-component-video-test.html
+++ b/packages/vue/examples/runtime/h-component-video-test.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>