Teleport&Suspense&Fragment

Teleport 传送门

即希望在组件内部使用Dialog, 又希望渲染的 DOM 结构不嵌套在组件的 DOM 中

html

<body>
  <div id="app"></div>
  <div id="dialog"></div>
</body>

js

<template>
  // teleport to属性指向需要挂载到的外部dom元素
  <teleport to="#dialog">
    <div class="dialog">
    // ... 省略
    </div>
  </teleport>
</template>

Suspense 根据异步展示不同内容

html

<template>
  <suspense>
    <!-- 等待组件的setup中return 一个fulfilled的promise会展示default插槽中的内容 -->
    <template #default>
      <async-component />
    </template>
    <!-- 刚开始会渲染一个 fallback 状态下的内容 -->
    <template #fallback>
      <div>
        Loading...
      </div>
    </template>
  </suspense>
</template>

Fragment

不再限制单个根节点