Vue 2

• 使用 Object.defineProperty 实现响应式
• 无法检测对象属性的添加/删除
• 无法直接检测数组索引和长度变化
• 需要使用 Vue.set 或 this.$set 手动触发响应式

Vue 3

• 使用 Proxy 实现响应式
• 可以检测对象属性的添加/删除
• 可以检测数组索引和长度变化
• 无需手动触发响应式，使用更直观

Vue 2

• 主要使用选项式 API (Options API)
• 按 data、methods、computed 等选项组织代码
• 逻辑分散，难以复用

Vue 3

• 引入组合式 API
• 允许按功能组织代码，提高代码复用性和可维护性
• 支持 TypeScript 类型推断

Vue 3 优化

• 虚拟 DOM：重构了虚拟 DOM 实现，减少了运行时开销
• 编译优化：
  • 静态提升：将静态节点和属性提升到渲染函数外，避免重复创建
  • PatchFlag：标记动态节点，减少 diff 算法的比较范围
  • 缓存事件处理函数：避免每次渲染都创建新的函数
• 按需引入：核心功能可按需导入，减小打包体积

Vue 2

• beforeCreate、created
• beforeMount、mounted
• beforeUpdate、updated
• beforeDestroy、destroyed

Vue 3

• 保留大部分生命周期钩子
• 调整了部分名称：
  • beforeDestroy → beforeUnmount
  • destroyed → unmounted
• 新增 onRenderTracked 和 onRenderTriggered 用于调试

Vue 2

• TypeScript 支持有限，需要额外配置

Vue 3

• 原生支持 TypeScript
• 类型定义更完善，提供更好的类型推断

Vue 3 新特性

• Suspense：处理异步组件的加载状态
• Teleport：将组件内容渲染到 DOM 树的其他位置
• Fragment：支持多个根节点的组件
• Emits 选项：显式声明组件的事件
• Vite 支持：官方推荐使用 Vite 作为构建工具，提供更快的开发体验

Vue 3 破坏性变更

• 移除了 v-on.native 修饰符
• 移除了 filter 过滤器
• 调整了 v-model 的使用方式
• 调整了 slot 的语法，使用 v-slot 指令

Vue 2

• 默认使用 Webpack 作为构建工具

Vue 3

• 推荐使用 Vite，提供更快的开发服务器和构建速度

Vue 3 是对 Vue 2 的全面升级，通过 Proxy 实现了更完善的响应式系统，引入了组合式 API 提高代码组织能力，同时在性能、类型支持和新特性方面都有显著提升。虽然存在一些破坏性变更，但这些变更大多是为了提升框架的可维护性和性能。对于新项目，推荐使用 Vue 3；对于现有 Vue 2 项目，可以根据需要逐步迁移。