vue2往vue3升级需要注意的点（个人建议非必要别直接升级）
将 Vue 2 项目升级到 Vue 3 的过程中，需要重点关注以下几个难点和关键点：
建议小项目直接用vue3重写更快，bug更少
文章目录
- 1. **Composition API 的学习与应用**
- 2. **全局 API 的变更**
- 3. **模板语法的兼容性变化**
- 4. **组件选项和生命周期的变化**
- 5. **插件和第三方库的兼容性**
- 6. **构建工具与依赖项的升级**
- 7. **响应式系统的底层变化**
- 8. **测试与调试迁移**
- 9. **性能优化和打包体积**
1. Composition API 的学习与应用
- Vue 3 引入了 Composition API，与 Vue 2 的 Options API 风格截然不同。
- 难点在于其不仅仅是语法变化，而是一种全新的组织逻辑和代码复用方式。
- 开发者需熟悉
setup()、ref、reactive、watch、computed等 API 的使用。
2. 全局 API 的变更
- Vue 3 中部分 Vue 2 的全局 API 被弃用或更改，例如：
Vue.extend现在仅用于定义组件。Vue.nextTick()现在为nextTick()（需从vue模块导入）。Vue.set已被弃用，因为响应式系统已基于 Proxy/Reflect 实现。
3. 模板语法的兼容性变化
- 自定义指令的钩子函数命名变化（如
bind→beforeMount）。 - 渲染函数和 JSX 的变化，例如组件不再自动注入
h（createElement）。 - 模板中不再支持非-prop 的 attribute 自动绑定到根元素。
4. 组件选项和生命周期的变化
- 生命周期钩子命名变化（如
beforeCreate→beforeUnmount）。 destroyed→unmounted，beforeDestroy→beforeUnmount。- 不再支持异步组件的
resolve和reject回调写法。
5. 插件和第三方库的兼容性
- 很多 Vue 2 插件尚未完全支持 Vue 3，可能需要寻找替代方案或等待更新。
- 如
element-ui需要升级为支持 Vue 3 的element-plus。 vue-router、vuex也需要使用 Vue 3 兼容版本（如vue-router@4、vuex@4）。
6. 构建工具与依赖项的升级
- 构建工具如 Webpack/Vite 配置可能需要调整。
- 需要更新项目依赖项版本，确保兼容 Vue 3。
- 删除 Vue 2 的编译依赖，替换为 Vue 3 的相关依赖。
7. 响应式系统的底层变化
- Vue 3 使用
Proxy替代Object.defineProperty，因此某些 Vue 2 的响应式写法可能不再适用。 - 如直接索引修改数组或修改对象长度，不会触发更新。
8. 测试与调试迁移
- 单元测试框架（如 Vue Test Utils）需升级为 Vue 3 兼容版本。
- 测试用例可能需要重写以适配新的 API 和生命周期。
9. 性能优化和打包体积
- Vue 3 默认使用
createApp，按需引入组件可显著减少打包体积。 - 需重新评估项目的性能瓶颈并优化。
建议：
- 使用 Vue 3 的官方迁移指南 和 Vue 2 到 Vue 3 迁移插件 辅助升级。
- 分阶段进行迁移，先升级基础依赖和构建配置，再逐步重写组件逻辑。