一、DocumentFragment是什么？

DocumentFragments (en-US) 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。

总而言之一句话：DocumentFragment是Element的一个性能更优的替代品；

MDN中的介绍

二、创建方式

创建DocumentFragment的方法有两种，document.createDocumentFragment()和new Fragment()。对于document.createDocumentFragment()，所有浏览器都支持（包括IE6），而构造函数方法就不是所有浏览器都有效了（IE没有实现该方法）。

总而言之一句话：所以从兼容性上来说推荐使用document.createDocumentFragment()。

三、在vue3中示例

示例一个简单的massage弹窗提示功能，无需纠结实现的功能，仅仅简单实现;
代码目录结构如下；

<template>
    <div class="z-massage">
        <div class="z-massage__wrapper">
            <div class="z-massage__wrapper-content">这是一条massage提示内容</div>
        </div>
    </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang='scss'>
.z-massage{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(189, 195, 199,0.3);
    &__wrapper{
        position: absolute;
        top: 20px;
        left: 50%;
        width: 360px;
        line-height: 50px;
        height: 50px;
        transform: translateX(-50%);
        background-color:#2ecc71;
        border-radius: 10px;
        text-align: center;
    }
}
</style>

在index.ts中写插入到body的逻辑

import { createApp } from 'vue'
import massageCpn from './z-massage.vue'
type func = () => void
const massage: func = () => {
    const fragment = document.createDocumentFragment()
    const app = createApp(massageCpn)
    app.mount(fragment as unknown as Element)
    //子节点的数量为1
    console.log('🚀 ~ file: index.ts:8 ~ fragment.childElementCount', fragment.childElementCount)
    //将文档碎片操作到body中
    document.body.appendChild(fragment)
    //子节点的数量为0
    console.log('🚀 ~ file: index.ts:10 ~ fragment.childElementCount', fragment.childElementCount)
}

export default massage

在app.vue的测试该组件

<script setup lang="ts">
import massage from './components/massage/index.js'
const clickEvt= ()=>{
  massage()
}
</script>

<template>
  <div @click="clickEvt">点击</div>
</template>