Vue3内置组件

Guitar大约 2 分钟

fragment 组件

在Vue2中每个组件必须有一个根标签。如果每一个组件必须有根标签，组件嵌套组件的时候，有很多无用的根标签，性能方面稍微有点问题。

在Vue3中每个组件不需要有根标签（允许模板中有多个根标签）。实际上内部实现的时候，最终将所有组件嵌套好之后，最外层会添加一个 <fragment></fragment>，用这个fragment当做根标签。这是一种性能优化策略，解决了无用的根标签嵌套问题，也是Vue3模板中支持多个根标签的原因。

<fragment> 是虚拟的，不会编译生成在html中；是自动添加的，无需手动添加。

teleport 组件

<teleport> 组件用以实现组件（标签体）渲染位置的自定。

<!--以常用的模态窗口为例-->

<!-- 遮罩层（遮盖背景元素，防止用户操作） -->
<div v-show="isShow" class="cover">
    <!--模态窗口（用户进行操作的窗口）-->
    <div class="s">
        <button>进行用户交互</button>
    </div>
</div>

默认情况下，组件渲染的位置位于父元素的内部。

组件的父元素影响着元素的定位（子绝父相），对于一些组件，我们希望它不要作为别的元素的子元素，即直接位于 <body> 下，这样方便定位，或者是希望渲染至一个特定的位置。此时就可以使用 <teleport> 组件。

<!-- to="selector" 同CSS语法，渲染至指定元素的内部 -->
<!-- to="#id" id选择器，渲染至指定id的元素内部 -->
<teleport to="body">
    <!-- 遮罩层（遮盖背景元素，防止用户操作） -->
    <div v-show="isShow" class="cover">
        <!--模态窗口（用户进行操作的窗口）-->
        <div class="s">
            <button>进行用户交互</button>
        </div>
    </div>
</teleport>