Vue2 与 Vue3 的主要区别

Vue 3 (2020年发布) 是 Vue 2 的重大升级版本，带来了许多架构改进和新特性。以下是两者的主要区别：

1. 架构与性能

响应式系统重写：
- Vue 2 使用 Object.defineProperty
- Vue 3 改用 Proxy，支持更多数据类型(如Map/Set)和更好的性能
虚拟DOM优化：
- Vue 3 的 diff 算法更高效
- 静态树提升(Static Tree Hoisting)和静态属性提升(Static Props Hoisting)
- 碎片支持(Fragments)，组件可以有多个根节点
打包体积更小：
- Vue 3 核心代码体积减少约40%
- Tree-shaking 支持更好，未使用的API不会打包进最终代码

2. Composition API

Vue 2：主要使用 Options API (data, methods, computed等选项)
Vue 3 ：引入 Composition API (setup()函数)，逻辑组织更灵活

javascript 复制代码

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

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    return { count, double, increment }
  }
}

3. 类型支持

Vue 2：对TypeScript支持有限
Vue 3：完全用TypeScript重写，提供更好的TS支持

4. 新特性

Teleport：将组件渲染到DOM中的任意位置
Suspense：处理异步组件加载状态
多个v-model：一个组件支持多个v-model绑定
自定义渲染器API：更容易创建自定义渲染器(如小程序、Canvas等)

5. 生命周期变化

Vue 2	Vue 3 (Composition API)
beforeCreate	使用 setup()
created	使用 setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

6. 其他重要变化

全局API变更：
- Vue.prototype 改为 app.config.globalProperties
- 全局API如 Vue.nextTick() 改为按需导入
指令变化：
- v-model 默认使用 modelValue 而非 value
- v-bind 的 .sync 修饰符被移除，用 v-model 参数替代
过渡类名变更：
- v-enter 改为 v-enter-from
- v-leave 改为 v-leave-from

7. 兼容性

Vue 3 不兼容 IE11 (需要额外polyfill)
大多数 Vue 2 插件需要更新才能在 Vue 3 中使用

迁移建议

新项目建议直接使用 Vue 3
现有 Vue 2 项目可以使用迁移构建版本
官方提供迁移工具 @vue/compat 帮助逐步迁移

Vue 3 在性能、开发体验和扩展性方面都有显著提升，特别是对于大型复杂应用，Composition API 提供了更好的代码组织和复用方式。