odjbin/vue-core-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增h-component.html示例文件展示直接创建虚拟DOM节点
- 在vnode.ts中为数组子节点添加ShapeFlags.ARRAY_CHILDREN标记
- 实现了绕过h函数直接构建组件虚拟节点的演示功能
This commit is contained in:
dj
2026-02-27 17:35:51 +08:00
parent 4225ae0b8f
commit 61edc322f2
2 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/runtime-core/src/vnode.ts
View File

@@ -32,6 +32,7 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
if (children == null) { if (children == null) {
children = null children = null
} else if (isArray(children)) { } else if (isArray(children)) {
type = ShapeFlags.ARRAY_CHILDREN
} else if (typeof children === 'object') { } else if (typeof children === 'object') {
} else if (isFunction(children)) { } else if (isFunction(children)) {
} else { } else {

38
packages/vue/examples/runtime/h-component.html Normal file
View File

@@ -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>