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

feat(runtime): 添加 Fragment Text Comment 导出支持

Browse Source 
- 在 runtime-core 中导出 Fragment、Text、Comment 符号
- 在 vue 主入口文件中导出 Fragment、Text、Comment
- 添加 h-other.html 示例文件展示 Text、Comment、Fragment 的使用
- 添加 h-other-ym-test.html 示例文件测试 Fragment 渲染功能
- 创建 Fragment、Text、Comment 符号常量定义
This commit is contained in:
dj
2026-02-27 20:46:53 +08:00
parent 6aa564ef7c
commit abf8112359
6 changed files with 64 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
export { queuePreFlushCb } from './scheduler'
export { watch } from './apiWatch'
export { h } from './h'
export { Fragment, Text, Comment } from './vnode'

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

@@ -6,6 +6,10 @@ import {
ShapeFlags
} from '@vue/shared'
export const Fragment = Symbol('Fragment')
export const Text = Symbol('Text')
export const Comment = Symbol('Comment')
export interface VNode {
__v_isVNode: true
type: any

0
packages/vue/examples/runtime/h-component-video-test.html → packages/vue/examples/runtime/h-component-ym-test.html
View File

27
packages/vue/examples/runtime/h-other-ym-test.html Normal file
View File

@@ -0,0 +1,27 @@
<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>
//Fragment : 片段 vue3一个模板中, 可以有多个根节点,就是利用这片段完成的
const { h, render, Text,Comment,Fragment } = Vue
// const vnodeText = h(Text, '这是一个Text')
// console.log(vnodeText)
// const vnodeComment=h(Comment,'这是一个comment')
// console.log(vnodeComment);
// render(vnodeComment,document.querySelector('#app'))
const vnodeFragment=h(Fragment)
console.log(vnodeFragment);
render(vnodeFragment,document.querySelector('#app'))
</script>
</html>

24
packages/vue/examples/runtime/h-other.html Normal file
View File

@@ -0,0 +1,24 @@
<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>
//Fragment : 片段 vue3一个模板中, 可以有多个根节点,就是利用这片段完成的
const { h, render, Text,Comment,Fragment } = Vue
const vnodeText = h(Text, '这是一个Text')
console.log(vnodeText)
const vnodeComment=h(Comment,'这是一个comment')
console.log(vnodeComment);
const vnodeFragment=h(Fragment)
console.log(vnodeFragment);
</script>
</html>

9
packages/vue/src/index.ts
View File

@@ -1,2 +1,9 @@
export { reactive, effect, ref, computed } from '@vue/reactivity'
export { queuePreFlushCb, watch, h } from '@vue/runtime-core'
export {
queuePreFlushCb,
watch,
h,
Fragment,
Text,
Comment
} from '@vue/runtime-core'