vue3.0视频,vue3 视频教程,vue3.0项目实战视频,vue3jsx,vue3ts,vue3技巧
Vue 3.0 片段（Fragment）是一种可以在 Vue 组件中包含多个根元素的语法结构，它能够让开发者更方便地编写组件。

在 Vue 2.x 中，组件的模版必须只有一个根元素。但在实际开发中，有些场景下需要在模版中使用多个根元素，这时就可以使用 Vue 3.0 版本提供的片段来解决此问题。

Vue 3.0 版本中，片段可以通过 <template> 标签或者 createVNode 函数来创建。例如：

html
<template>
<h1>这是标题</h1>
<p>这是段落</p>
</template>


javascript
import { createVNode, Fragment } from 'vue';

export default {
setup() {
const fragment = () => [
createVNode('h1', null, '这是标题'),
createVNode('p', null, '这是段落')
];

return {
fragment
}
},

render() {
return h(Fragment, {}, this.fragment());
}
}


上述代码中，我们可以看到两种方式创建片段的例子。其中，在 setup() 函数中定义了一个返回类型为数组的函数 fragment()，这个函数返回包含两个 createVNode 的数组，每个 createVNode 分别对应一个根元素。在 render() 函数中，我们将 Fragment 组件作为根节点，然后将 fragment() 返回的数组作为子内容传入。这样就能够在组件中使用多个根元素了。

需要注意的是，片段只是一个虚拟节点，不会被渲染到实际的 DOM 中，因此也不会占用任何真实的 DOM 节点。