vue2升级vue3从 Vue2 升级到 Vue3 的探索之旅自从 2020 年 9 月份 Vue.js 3.0 正式

从 Vue2 升级到 Vue3 的探索之旅

自从 2020 年 9 月份 Vue.js 3.0 正式发布以来，许多开发者都想尝试升级自己的项目到这个全新的版本。Vue3 带来了许多新功能和优化，如更好的性能、更小的打包体积、更简洁的 API 等，让我们一起来探索如何将 Vue2 项目升级到 Vue3 吧！

在开始升级之前，建议先确保项目中的依赖库和插件已经支持 Vue3。此外，Vue3 放弃了对 IE11 的支持，如果你的项目需要支持 IE11，可能需要暂时停留在 Vue2。

首先，卸载项目中的 Vue2，然后安装 Vue3：


npm uninstall vue

npm install vue@next

同时，更新 Vue-CLI 插件，使其支持 Vue3：


npm install -g @vue/cli

vue upgrade --next

虽然 Vue3 保留了很多 Vue2 的 API，但一些重要的改动需要我们修改代码：

全局 API 变更: Vue3 的全局 API 和方法进行了整理，避免了命名空间污染。例如，Vue2 中的 Vue.set 和 Vue.delete 现在需要从 @vue/reactivity 中导入：


// Vue2

import Vue from 'vue'

Vue.set(obj, key, value)

// Vue3

import { set } from '@vue/reactivity'

set(obj, key, value)

生命周期钩子变更: Vue3 为一些生命周期钩子添加了新的别名，使其更符合语义。例如 created 变为 onBeforeMount，mounted 变为 onMounted 等。需要注意的是，Vue2 的 destroyed 和 beforeDestroy 钩子在 Vue3 中已经被废弃，需要改用 onUnmounted 和 onBeforeUnmount。
插件和自定义指令更新: Vue3 对插件和自定义指令的 API 进行了重构。例如，插件需要暴露一个 install 方法，该方法接收一个 app 对象作为参数。自定义指令的参数顺序也发生了变化。
Composition API：Vue3 引入了全新的组合式 API（Composition API），它提供了一种更灵活、逻辑复用更强的方式编写组件。虽然可选，但建议尝试使用 Composition API 重构部分组件，以便更好地利用 Vue3 的优势。

Vue3 中的异步组件语法稍有不同。在 Vue2 中，我们使用 Vue.component() 方法注册异步组件，而在 Vue3 中，我们可以直接使用 defineAsyncComponent 函数：


import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

Vue3 中的 <transition> 组件不再支持 appear 属性，需要使用新的 v-enter-from 和 v-leave-to 类名代替。
Vue3 的响应式系统进行了重写，使用了 ES6 Proxy 代替了 Vue2 的 Object.defineProperty。这意味着 Vue3 的响应式系统在性能和兼容性方面都有所提升，但也可能导致一些与 Vue2 行为不一致的地方。

完成代码迁移后，需要对项目进行充分的测试，确保功能和性能都满足预期。在部署到生产环境之前，可以先在测试环境中验证 Vue3 带来的优势。