VUE值Teleport与Suspense

1、Teleport

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

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

position:fixed; model窗口居整个web界面居中弹出，但是遇到filter:saturate(200%)滤镜就失效了。需要<teleport>包裹

2、suspense（实验性）

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

2）使用步骤：

• 异步引入组件
• 使用suspense包裹组件，并配置好default与fallback

3、全局API转移到应用对象

app.directive在Vue 3中的作用是注册全局自定义指令‌。通过使用app.directive方法，开发者可以定义一个全局自定义指令，该指令可以在整个应用中重复使用，从而简化DOM操作和提升代码复用性。

app.directive的基本用法

在Vue 3中，app.directive用于注册全局自定义指令。其基本语法如下：

app.directive(name, [definition])

4、其他

非兼容性改变 | Vue 3 迁移指南

• 过渡类名 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