新组件

Teleport

Teleport是一种能够将组件 HTML 结构移动到指定位置的技术

• 代码示例

<teleport to="body">
  <div class="modal" v-show="isShow">
    <h2>我是一个弹窗</h2>
    <p>我是弹窗中的一些内容</p>
    <button @click="isShow = false">关闭弹窗</button>
  </div>
</teleport>

Suspense

作用: 等待异步组件时渲染一些额外内容, 让应用有更好的用户体验

使用步骤:

• 异步引入组件

import { defineAsyncComponent, Suspense } from 'vue'
const Child = defineAsyncComponent(() => import('./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>

全局 API 转移到应用对象

• app.component
• app.config
• app.directive
• app.mount
• app.unmount
• app.use

其他改动

• 过渡类名v-enter修改为v-enter-from、过渡类名v-leave修改为v-leave-from
• keyCode作为v-on修饰符的支持
• v-model指令在组件上的使用已经被重新设计, 替换掉了v-bind.sync
• v-if和v-for在同一个元素身上使用时的优先级发生了变化
• 移除了$on、$off和$once实例方法
• 移除了过滤器filter
• 移除了$children实例propert
• ......