Vue2 和 Vue3 的区别

Vue2 和 Vue3 的区别主要体现在性能、架构设计、API 以及生态支持上，关键点总结如下，方便你快速掌握：

---

1. 性能提升

• Vue3 性能更优，启动更快，内存占用更低
• 编译器和响应式系统重写，渲染效率提升约 2 倍

---

2. 响应式系统

• Vue2 用的是基于 Object.defineProperty 的响应式
• Vue3 使用 Proxy 实现响应式，支持更多数据类型（如 Map、Set），更灵活更高效

---

3. 组合式 API（Composition API）

• Vue2 主要用 Options API（data、methods、computed）
• Vue3 新增 Composition API，通过 setup() 函数组织逻辑，更灵活，方便代码复用

// Vue3 组合式 API 示例
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  }
}

---

4. Fragments 支持

• Vue2 组件模板只能有一个根节点
• Vue3 支持多个根节点（Fragments），结构更自由

---

5. Teleport 传送门

• Vue3 新增 <Teleport>，可以把组件的内容渲染到 DOM 另一位置（如弹窗）

---

6. Suspense 组件

• Vue3 支持 Suspense，能优雅处理异步组件加载，显示占位内容

---

7. 更好的 TypeScript 支持

• Vue3 从设计上支持 TypeScript，类型推导更完善，开发体验更好

---

8. 新的生命周期钩子

Vue2	Vue3
beforeDestroy	beforeUnmount
destroyed	unmounted

---

9. 自定义指令 API 变化

• Vue3 自定义指令钩子改为 created、beforeMount、updated、beforeUnmount 等

---

10. 其他改进

• Vue3 tree-shaking 支持，更小体积
• 更好的异步组件支持
• Vue Router、Vuex 都升级配合 Vue3

---

总结：Vue3 更现代、灵活、高性能，是未来主流；Vue2 生态成熟，学习成本低，仍在广泛使用。