面试题：Vue 2 和 Vue 3 有哪些区别？Vue 3 有哪些更新？

Vue 3 是 Vue.js 的一次重大升级，带来了许多新特性和改进。以下是 Vue 2 和 Vue 3 的主要区别，以及 Vue 3 的重要更新：

1. 性能提升

更小的体积：Vue 3 通过 Tree-shaking 支持（基于 ES Module），使得打包后的体积更小。
更快的渲染：Vue 3 重写了虚拟 DOM，优化了 diff 算法，提升了渲染性能。
更好的初始化性能：Vue 3 的初始化速度比 Vue 2 更快。

2. Composition API

Vue 3 引入了 Composition API，这是 Vue 3 最核心的更新之一。它解决了 Vue 2 中 Options API 的一些局限性：

更好的逻辑复用：通过 setup 函数和自定义 Hook，可以更灵活地组织和复用逻辑。
更好的 TypeScript 支持：Composition API 对 TypeScript 的支持更加友好。
更清晰的代码结构：将相关逻辑组织在一起，而不是分散在 data、methods、computed 等选项中。

// Vue 3 Composition API 示例
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return {
      count,
      doubleCount,
      increment,
    };
  },
};

3. 更好的 TypeScript 支持

Vue 3 完全使用 TypeScript 重写，提供了更好的类型推断和类型支持：

内置 TypeScript 类型定义。
Composition API 对 TypeScript 更加友好。

4. 新的响应式系统

Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty，带来了以下优势：

更好的性能：Proxy 可以直接监听对象和数组的变化，无需递归遍历。
支持更多数据类型：Vue 2 无法检测到对象属性的添加或删除，而 Vue 3 可以。
更简洁的 API：提供了 ref 和 reactive 等新的响应式 API。

// Vue 3 响应式示例
import { reactive, ref } from 'vue';

const state = reactive({ count: 0 });
const count = ref(0);

5. 片段（Fragments）

Vue 3 支持多根节点组件（Fragments），而 Vue 2 要求组件必须有一个根节点。

<!-- Vue 3 支持多根节点 -->
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

6. Teleport 组件

Vue 3 引入了 <Teleport> 组件，可以将组件渲染到 DOM 中的任意位置，适合处理模态框、通知等场景。

<template>
  <teleport to="body">
    <div class="modal">这是一个模态框</div>
  </teleport>
</template>

7. Suspense 组件

Vue 3 提供了 <Suspense> 组件，用于处理异步组件的加载状态，提升用户体验。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>