目录

1、Fragment

2、Teleport

3、Suspense

4、Vue3对部分API的调整

1、Fragment

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

2、Teleport

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

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

3、Suspense

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

import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => import('@/components/Child.vue'))

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

<template>
  <div>
    <h3>我是（祖）件</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>加整中...</h3>
      </template>
    </Suspense>
  </div>

</template>

4、Vue3对部分API的调整

• 将全局的API，即：Vue.xxx调整到应用实例（app）上

•  data选项应始终被声明为一个函数
• 移除keyCode作为v-on的修饰符，同时不再支持config.keyCodes
• 移除v-on.native修饰符
  • 父组件中绑定事件

  • <my-component
        v-on:close="handleComponentEvent"
        v-on:click="handleNativeClickEvent"
    />

  • 子组件中生命自定义事件

  • <script>
        export default{
            emits:['close']
        }
    </script>