前言

Vue3 引入了一些新组件和功能，并对部分 API 进行了变更。以下是对这些变化的详细总结，包括每个功能的介绍、使用方法及其应用场景。

1. 【Teleport】

什么是 Teleport？

• Teleport 是 Vue 3 中新增的一个功能，允许你将组件的 HTML 结构移动到指定的 DOM 位置。这在处理模态框、弹窗等需要脱离父组件结构渲染的场景中非常有用。

基本语法

<teleport to="目标选择器">
  <template>
    <!-- Teleport 的内容 -->
  </template>
</teleport>

• to 属性：指定将内容传送到的 DOM 选择器。

使用方法

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

<script setup>
import { ref } from 'vue';

let isShow = ref(true);
</script>

解释：

• 这个示例中，模态框的 HTML 结构被 Teleport 到了 body 标签内，尽管其逻辑上属于当前组件。

2. 【Suspense】

什么是 Suspense？

• Suspense 是 Vue 3 中的一个新组件，用于在等待异步组件加载时渲染一些额外内容，从而提升用户体验。这对于需要等待异步请求的数据或组件时尤为有用。

基本语法

<Suspense>
  <template v-slot:default>
    <!-- 主内容 -->
  </template>
  <template v-slot:fallback>
    <!-- 加载状态 -->
  </template>
</Suspense>

使用方法

• 步骤 1：异步引入组件

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

• 步骤 2：使用 Suspense 包裹组件

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

解释：

• 当 Child 组件异步加载时，Suspense 会显示 fallback 插槽中的内容（如“加载中...”），加载完成后，Child 组件的内容会自动替换掉 fallback。

3. 【其他变更】

Vue 3 对部分指令、事件及实例方法进行了修改或移除，以下是这些变化的详细总结。

1. 过渡类名的变更

• Vue 2：v-enter、v-leave
• Vue 3：v-enter-from、v-leave-from

这使得过渡类名更加语义化，区分了过渡的不同阶段。

2. keyCode 事件修饰符的移除

• Vue 2 中，keyCode 可用于 v-on 事件修饰符（如 @keyup.enter）。

• Vue 3：keyCode 被移除，推荐使用 event.key 代替。

  <input @keyup.enter="submit" /> <!-- Vue 2 -->
  <input @keyup.enter="submit" /> <!-- Vue 3 中依旧支持 -->
  

3. v-model 的重新设计

• Vue 3 中，v-model 的语法被重新设计，以支持多个 v-model 绑定到一个组件。v-bind.sync 已被移除。

  <child-component v-model:title="title" v-model:content="content" />
  

4. v-if 和 v-for 的优先级变更

• Vue 3 中，v-if 的优先级高于 v-for，这意味着在同一元素上使用时，v-if 会首先执行。

5. 实例方法的移除

• 移除了 $on、$off 和 $once：Vue 3 不再支持这三个事件方法，推荐使用组件的事件绑定机制或组合式 API 替代。
• 移除了 $children 实例属性：Vue 3 不再支持直接访问子组件实例的 $children 属性，建议使用 ref 或依赖注入来管理子组件的引用。
• 移除了过滤器 filter：过滤器在 Vue 3 中被移除，推荐使用计算属性或方法来处理数据的格式化。

6. 过滤器（Filters）的移除

• Vue 3 中，过滤器功能被移除。对于数据格式化，推荐使用计算属性或方法。

---

这些变更和新增功能使得 Vue 3 更加模块化、灵活，并优化了性能和可维护性。开发者需要熟悉这些新特性和 API 变更，以便在项目中有效地应用它们。