vue3 新组件

Fragment（片段）

• vue2 中组件必须要一个根表情
• vue3 不需要
• vue3 中没有根标签，内部会将其包裹在Fragment虚拟元素中（在新版vue.js devtools 审查元素能够看到）

<template>
  <h2>aaaa</h2>
  <h2>aaaa</h2>
</template>

Teleport（瞬移）

• to：表示teleport包裹的元素会插入body标签下。
• 即使在不同的元素下渲染，但组件的父子关系不会变。

<template>
  <teleport to="body">
    <div class="modal">
      这是一个弹窗
    </div>
  </teleport>
</template>

也可以使用选择器

<teleport to="#modals">
  <div>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>

<!-- 输出 -->
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

Suspense（不确定）

• 在子组件异步加载之前，可以先显示后背内容

父组件

<template>
  <Suspense>
    <template #default>
      <son />
    </template>
    
    <template #fallback>
      <h1>加载中...</h1>
    </template>
  </Suspense>
</template>

son 子组件

<template>
  <h2>
    {{data}}
  </h2>
</template>

<script>
export default {
  setup () {
    // 注意此处 setup 返回的是 Promise 对象
    return new Promise(res => {
      setTimeout(() => {
        res({data: '加载完成'})
      }, 2000);
    })
  }
}
</script>