vue2升级vue3注意事项和难点

注意事项

• 备份项目

  • 在开始升级之前，一定要对整个项目进行备份。这包括源代码、配置文件、测试用例等所有与项目相关的文件。因为升级过程可能会引入一些意外的问题，备份可以确保在出现严重错误时能够恢复到原始状态。

• 更新依赖版本

  • 仔细检查项目中的所有依赖项，特别是与 Vue 相关的库。例如，vue-router和vuex需要升级到与 Vue 3 兼容的版本。同时，要注意这些库的升级可能会带来 API 的变化，需要对代码进行相应的修改。
  • 对于构建工具（如Vue CLI或Vite），也要确保其版本支持 Vue 3。如果构建工具版本过低，可能无法正确打包或运行 Vue 3 项目。

• 测试策略

  • 制定详细的测试计划。由于 Vue 3 在很多方面（如响应式系统、API 等）都有所变化，需要对项目中的所有功能进行全面测试。包括组件的渲染、数据绑定、事件处理、路由跳转、状态管理等各个功能模块。
  • 考虑使用自动化测试工具来提高测试效率。例如，对于组件可以编写单元测试，使用Jest或Vue Test Utils等工具，确保组件在升级后的行为符合预期。

• 文档更新

  • 在升级过程中，记录所有对代码的修改，包括对 API 的替换、组件的重构等内容。同时，更新项目的文档，如开发文档、API 文档等，以便后续开发人员能够理解项目的新架构和新用法。

难点

• 全局 API 的变化

  • Vue.prototype的替代：在 Vue 2 中，通过Vue.prototype来挂载全局属性是很常见的做法，如Vue.prototype.$http = axios用于全局的 HTTP 请求。在 Vue 3 中，需要使用app.config.globalProperties来挂载全局属性。这需要在应用创建时进行配置，而且对于已经存在的大量代码中使用this.$xxx访问全局属性的地方都需要进行检查和修改。
  • 过滤器的移除：Vue 3 移除了过滤器功能。如果项目中有大量使用过滤器的地方，如在模板中进行文本格式化（{{ text | formatText }}），需要将其转换为计算属性或方法。这可能涉及到大量模板和逻辑代码的修改。

• 响应式系统的差异

  • Vue 3 的响应式系统基于Proxy，而 Vue 2 基于Object.defineProperty。这可能导致一些在 Vue 2 中正常工作的数据绑定在 Vue 3 中出现问题。
  • 例如，在 Vue 2 中对对象属性的新增和删除可能不会触发视图更新，而在 Vue 3 中，Proxy能够更好地处理这些情况。但是，如果代码依赖于 Vue 2 的响应式系统的这种特性，在升级后可能会出现意外的视图更新或者不更新的情况，需要仔细检查和调整数据的操作方式。

• 组合式 API 的引入

  • 虽然组合式 API 是 Vue 3 的一个强大功能，但对于习惯了 Vue 2 选项式 API 的开发者来说，是一个较大的转变。将选项式 API 的组件转换为组合式 API 需要重新组织代码结构。
  • 例如，在组合式 API 中，需要使用setup函数来整合data、computed、methods等功能。而且，在setup函数中使用响应式数据需要使用ref、reactive等函数，这与 Vue 2 中的this关键字访问数据的方式有很大不同，容易出现理解和使用上的错误。

• 生命周期钩子的变更

  • Vue 3 中的生命周期钩子名称和使用方式发生了变化。例如，beforeCreate和created被合并到setup函数中，其他钩子如beforeMount变为onBeforeMount、mounted变为onMounted等。
  • 这些钩子需要从vue中导入才能使用，这要求开发者在每个使用生命周期钩子的组件中进行相应的修改，并且要注意新钩子的执行时机和参数与 Vue 2 中的区别，避免出现逻辑错误。