简述Vue2和Vue3的区别

Vue2 和 Vue3 是 Vue.js 的两个主要版本，Vue3 在性能、开发体验和架构上进行了全面升级。以下是两者的主要区别：

1. 响应式系统

• Vue2
  使用 Object.defineProperty 实现响应式，只能劫持对象的属性访问和修改，无法直接监听以下操作：

  • 新增/删除对象属性（需用 Vue.set/Vue.delete）。

  • 数组索引直接修改（如 arr[0] = value）或修改数组长度。

• Vue3
  基于 Proxy 和 Reflect 实现响应式，支持全量监听：

  • 对象属性的新增、删除。

  • 数组索引和长度的直接修改。

  • 嵌套对象的深层监听（无需递归遍历初始对象）。

2. Composition API

• Vue2
  使用 Options API（data, methods, computed 等分块编写），逻辑分散，复用需借助 Mixins（可能导致命名冲突）。

• Vue3
  引入 Composition API（setup() 函数 + ref, reactive 等函数），允许按逻辑功能组织代码，支持更灵活的逻辑复用（自定义 Hook）。

  // 示例：Composition API 组织逻辑
  import { ref, onMounted } from 'vue';
  export default {
    setup() {
      const count = ref(0);
      const increment = () => count.value++;
      onMounted(() => console.log('Mounted'));
      return { count, increment };
    }
  };

3. 性能优化

• 虚拟 DOM 优化
  Vue3 通过编译时标记静态节点，优化 Diff 算法（静态提升、补丁标记等），减少渲染开销。更快的渲染速度：Vue 3 通过优化虚拟 DOM 和编译器，提升了渲染性能。

• Tree-shaking 支持
  Vue3 的模块可被按需引入（如 v-model、Transition 组件），未使用的功能不会打包到最终产物。更小的包体积：Vue 3 支持 Tree-shaking，未使用的代码会被移除，减少了打包体积。

• 源码体积更小
  Vue3 压缩后约 10KB（Vue2 约 20KB）。

4. 生命周期

• Vue3 将 beforeDestroy 和 destroyed 重命名为 beforeUnmount 和 unmounted。

• Composition API 中的生命周期钩子通过函数形式调用（如 onMounted）：

  import { onMounted } from 'vue';
  setup() {
    onMounted(() => {
      console.log('Component mounted!');
    });
  }

5. 新特性

• Fragment（片段）
  支持组件有多个根节点（Vue2 必须单一根节点）。

• Teleport（传送门）
  将组件渲染到 DOM 树的任意位置（如模态框、弹窗）：

  <teleport to="#modal-container">
    <div class="modal">...</div>
  </teleport>

• Suspense（异步组件）
  简化异步组件的加载状态处理。

6. TypeScript 支持

• Vue3
  使用 TypeScript 重写，提供更好的类型推断和 IDE 支持。

• Vue2
  对 TypeScript 支持较弱，需依赖 Vue.extend 或装饰器（如 vue-property-decorator）。

7. 全局 API 变更

• Vue2
  全局配置通过 Vue.config 修改（影响所有实例），如 Vue.use()、Vue.component()。

• Vue3
  引入 createApp() 工厂函数，隔离实例配置：

  import { createApp } from 'vue';
  const app = createApp(App);
  app.use(router).mount('#app');

8. 其他变化

• v-model 改进
  Vue3 支持多个 v-model（如 v-model:title），并移除 .sync 修饰符。

• 事件 API
  支持多个事件监听器（Vue2 会覆盖同名事件）。

• 按键修饰符
  Vue3 不再支持 keyCode（如 @keyup.13 → 改用 @keyup.enter）。

总结

• 升级优势：Vue3 在性能、逻辑复用（Composition API）、TS 支持、新特性（Fragment/Teleport）等方面提升显著。

• 迁移成本：需注意破坏性变更（如全局 API、生命周期名称）。官方提供迁移工具（vue-compat）辅助升级。

• 适用场景：新项目推荐 Vue3；旧项目可逐步迁移或评估成本。