详解Vue2和Vue3的变化

Vue 3 相较于 Vue 2 不仅仅是一次简单的版本迭代，而是一次从底层架构 到上层开发体验的全面重构。这次升级旨在解决大型应用开发中的痛点，带来了性能的飞跃、逻辑组织方式的革新以及对 TypeScript 的完美支持。

为了让你更全面地掌握这两个版本的差异，我将从以下八个核心维度进行深度解析：

对比维度	Vue 2	Vue 3
响应式原理	`Object.defineProperty`	`Proxy`
API 风格	Options API	Composition API (主流) + Options API
TypeScript	支持较弱，需额外配置	原生支持，类型推导精准
多根节点	❌ 不支持 (单根)	✅ 支持 (Fragment)
Tree Shaking	❌ 不支持	✅ 支持 (按需打包)
全局挂载	`Vue.component`, `Vue.use`	`createApp().mount`
状态管理	Vuex	Pinia (官方推荐)
构建工具	Webpack (Vue CLI)	Vite (推荐)

这是最根本的底层变革，决定了 Vue 3 解决了 Vue 2 中许多响应式的"缺陷"。

Vue 2 的局限 ：
- 无法监听动态增删属性 ：对象新增属性或删除属性，视图不会更新，必须使用 Vue.set / this.$set 或 Vue.delete。
- 无法监听数组索引/长度 ：直接通过索引修改数组元素（arr[0] = x）或修改 length，无法被检测到，需使用 splice 等变异方法。
- 初始化性能：需要递归遍历所有属性进行劫持，如果数据层级很深，初始化耗时较长。
Vue 3 的优势 ：
- 全面拦截 ：Proxy 代理的是整个对象，可以监听对象属性的动态增删、数组索引修改、length 变更等，无需特殊 API。
- 性能优化：采用"懒代理"机制，只有当属性被访问时，才会去代理其子属性，大大提升了初始化速度和内存效率。
- 支持 ES6 集合 ：原生支持 Map、Set、WeakMap、WeakSet 等数据类型的响应式。

Vue 3 引入了 Composition API，解决了复杂组件中逻辑碎片化的问题。

Options API (Vue 2) ：
- 逻辑按 data、methods、computed、watch 等选项分散组织。
- 痛点：当一个功能逻辑涉及数据、方法、监听器时，代码会被拆散在文件各处，维护成本高（"逻辑碎片化"）。
Composition API (Vue 3) ：
- 允许按功能而非选项来组织代码。所有与某个功能相关的代码（状态、方法、副作用）都可以放在同一个 setup 函数或组合式函数中。
- 优势：逻辑复用更简单（可抽离为 composables 函数），无命名冲突，代码可读性和可维护性极高。

Vue 3 在编译和运行时层面做了大量优化，运行效率显著提升。

静态标记 (Patch Flag)：编译器会分析模板，给动态节点打上标记。在 diff 算法对比时，可以跳过静态子树，只对比动态部分，效率提升约 30%-50%。
Block Tree：引入了 Block 的概念，将动态节点收集起来，更新时只需遍历动态节点列表，无需遍历整个虚拟 DOM 树。
v-memo 指令：可以缓存模板片段，仅当依赖项变化时才重新渲染，极大优化大型列表的渲染性能。

Vue 3 的源码使用 TypeScript 重写，提供了顶级的类型支持。

Vue 2 ：TypeScript 支持较弱，需要借助 vue-class-component 等库，类型推导不精准，开发体验一般。
Vue 3：从底层就集成了 TypeScript，无论是 Composition API 还是 Options API，都能获得完美的类型推导、类型检查和 IDE 智能提示，极大地提升了代码质量和开发效率。

Fragment (多根节点) ：Vue 2 要求组件模板必须有一个唯一的根元素，经常需要无语义的 <div> 包裹。Vue 3 支持组件有多个根节点，更加灵活。
Teleport (瞬移组件) ：可以将组件（如 Modal、Toast）渲染到 DOM 树的任意位置（如 <body> 下），解决了样式隔离和层级（z-index）问题。
Suspense ：用于在异步组件（<script setup> 中使用 await）加载时，渲染后备内容（如 loading），提升用户体验。
v-model 语法统一 ：Vue 2 中 v-model 和 .sync 修饰符功能重叠。Vue 3 统一为 v-model，且支持多个 v-model 绑定，以及自定义修饰符（v-model:title.capitalize）。

Vue 3 对生命周期钩子进行了微调，主要体现在 Composition API 中。

命名变化 ：Composition API 中的钩子统一加上了 on 前缀，如 onMounted、onUnmounted 等。
销毁钩子 ：beforeDestroy 和 destroyed 在 Vue 3 中更名为 beforeUnmount 和 unmounted。
setup 替代 ：setup 函数替代了 beforeCreate 和 created 钩子的功能。

全局 API 变更 ：Vue 2 中的全局 API（如 Vue.component、Vue.use）是全局污染的。Vue 3 引入了 createApp，返回一个应用实例，通过实例方法进行挂载和注册，更加模块化。
状态管理 ：Vue 2 主要使用 Vuex。Vue 3 官方推荐使用 Pinia，它也是由 Vue 核心团队维护，API 更简洁，且完美支持 Composition API 和 TypeScript。

构建工具 ：Vue 2 时代主要使用 Webpack（Vue CLI），启动和热更新较慢。Vue 3 时代推荐使用 Vite，利用浏览器原生 ES 模块导入，启动速度极快，热更新几乎无延迟。
Tree Shaking ：Vue 3 支持 Tree Shaking，未使用的模块（如不使用 v-model 或过渡动画）在打包时会被自动移除，减小最终包体积。

Vue 2：生态成熟，适合维护老项目或对新技术不敏感的小型快速项目。
Vue 3 ：性能更强、代码组织更灵活、类型安全、生态现代化。是未来唯一的主流方向，强烈建议所有新项目直接使用 Vue 3（配合 Vite + Pinia + TypeScript）。