新的组件

2021-10-17

1.Fragment

在 Vue2 中: 组件必须有一个根标签
在 Vue3 中: 组件可以没有根标签, 内部会将多个标签包含在一个 Fragment 虚拟元素中
好处: 减少标签层级, 减小内存占用

2.Teleport

什么是 Teleport？—— Teleport 是一种能够将我们的组件 html 结构移动到指定位置的技术。

<template>
  <div>
    <button @click="isShow = true">点我弹个窗</button>
    <teleport to="body">
      <div v-if="isShow" class="mask">
        <div class="dialog">
          <h3>我是一个弹窗</h3>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <button @click="isShow = false">关闭弹窗</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
  import { ref } from "vue";
  export default {
    name: "Dialog",
    setup() {
      let isShow = ref(false);
      return { isShow };
    },
  };
</script>

3.Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验
使用步骤：
- 异步引入组件

1 2	import { defineAsyncComponent } from "vue"; const Child = defineAsyncComponent(() => import("./components/Child.vue"));

使用Suspense包裹组件，并配置好default 与 fallback

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>加载中.....</h3>
      </template>
    </Suspense>
  </div>
</template>