9.vue2 与 vue3 的区别
DETAILS
| 特性 | vue2 | vue3 |
|---|
| API 设计 | Options API | Composition API（推荐），但兼容 Options API |
| 全局 API 和内置组件 | 较为分散，部分全局 API 在 Vue3 中被调整或移除 | 更加模块化，新增了如 <teleport>等内置组件 |
| 打包体积 | 较大，Tree Shaking 支持有限 | 更小，支持 Tree Shaking，打包更轻量 |
| TypeScript 支持 | 可用，但类型推断可能不够准确 | 更好，内置 typing 优化，提高了类型安全性和可维护性 |
| 响应式系统 | 基于Object.defineProperty() | 基于 Proxy，性能更优，支持属性新增/删除检测 |
| 性能优化 | 较少编译优化 | 引入了静态提升、事件缓存等编译优化策略 |
| 核心代码尺寸 | 较大 | 控制在 10kb gzipped 上下，更加轻量 |
| 架构 | 单仓库结构 | Monorepo 结构，内部分层更清晰 |
| 开发工具和生态 | 使用 Webpack 等构建工具 | 官方推荐 Vite 开发服务器，基于 ES Import，启动快，HMR 即时 |
DETAILS
- Options API 与 Composition API
- Vue2：主要采用 Options API（选项式 API），将一个组件的逻辑（如 data、methods、computed 等）分散在不同的选项中。这种方式在小型组件中比较直观，但在大型组件中，代码的逻辑关联性可能会被分散，不利于维护和理解。
- Vue3：推出了 Composition API（组合式 API），通过 setup 函数将相关逻辑组合在一起。例如，可以将一个功能相关的响应式数据、计算属性、方法等都放在同一个 setup 函数内，使得代码的组织更加清晰，可复用性更强，尤其适合大型复杂组件的开发。
- 全局 API 和内置组件
- Vue2 和 Vue3 在全局 API 和内置组件方面也有所不同。Vue3 对一些全局 API 进行了调整，将一些全局 API 改为实例方法或者进行了更合理的模块划分。
- Vue3 还新增了一些内置组件，如
<teleport>，它允许将组件的内容渲染到指定的 DOM 节点下，而不受组件层级关系的限制。这在一些需要将组件内容渲染到特定布局（如模态框需要渲染到 body 元素下）的场景中非常有用。而 Vue2 没有类似<teleport>这样专门用于解决此类问题的组件。
- 打包体积和
Tree Shaking(打包会删除未引用的内容)
- Vue3：在打包方面进行了优化，支持 Tree Shaking（树摇）。Tree Shaking 是指通过静态分析去除 JavaScript 中未引用的代码。在 Vue3 中，Tree Shaking 的作用主要是帮助减少包的体积，提高应用的性能，使打包后的代码更轻量化和高效化。
- Vue2：相比之下，Vue2 在打包体积和 Tree Shaking 方面的支持没有 Vue3 那么完善。
- TypeScript 支持
- vue3 加强 TypeScript 支持，内置 typing 优化（增加静态标记），tsx 支持，不会影响不使用 ts 的用户。提高了自身可维护性
- Vue2：虽然也可以使用 TypeScript，但在类型定义和使用上存在一些不便之处。
- 性能优化
- Vue2 使用 Object.defineProperty()来实现数据响应式，这种方式在初始化时会递归遍历对象的所有属性，并且对于新增或删除属性无法直接响应式处理。
- Vue3 采用 Proxy 代理对象来实现响应式，Proxy 可以直接代理整个对象，能够检测到对象属性的新增、删除等操作，并且在性能上有一定提升，特别是在处理大型复杂对象时。
- 核心代码尺寸和架构
- Vue3：核心代码尺寸控制在 10kb gzipped 上下，采用了 monorepo 结构，内部分层更清晰，提高了代码的可维护性。
- Vue2：在代码结构和尺寸方面与 Vue3 有所不同，但同样提供了稳定的功能和性能。
- 开发工具和生态 Vite
- Vue3 推出了 Vite 作为官方推荐的开发服务器，它基于浏览器原生 ES Import 实现，提供了极快的冷启动和即时热模块更新（HMR）。
- Vue2 在开发工具方面可能没有如此紧密集成的官方推荐方案。
