之前对一个项目有兴趣，里面的前端框架使用了 Vue2，然而本地测试部署的时候，包管理器会报告大量的风险，于是就想着把它更新到 Vue3。不曾想这是遇到了 Vue 升级史上的高级别难度关卡，从基础层面就会有大量的不兼容。为了把自己的踏出来的第一步推进下去，要查阅挺多信息，然而在打开若干标签页之后，终于还是把时间又让给了其它的事情。然后，就又到了要清理标签页的时候了，为了不让先前的过程白费，尽可能在这里留下一些摘抄、记录、感想等等的痕迹。

感受 Vue3 跟 Vue2 不一样的第一个重量冲击来自于事件总线机制发生了变化。

在 Vue2 里面，各种操作的简略表达如下：

1. Vue.prototype.$bus=new Vue()
2. 监听： this.$bus.$on(‘方法名', (参数)=>{})，它可以累加
3. 触发： this.$bus.$emit(‘方法名', 实参值)
4. 销毁：this.$bus.$off(‘方法名')，谁监听谁销毁
5. 注意： 由于监听可以累加，所以必须要有第 4 步的销毁

到了 Vue3 里面，通常要借助于额外 npm 的组件 tiny-emitter 或者 mitt 来通讯，网上看尤以后者居多。如果是前者，则用法基本上如，

如果是后者，则如，

举例如，首先在 main.js 注册，

在事件接收的页面里写，

在事件发送的页面里写，

以上为简略版的示意。参考链接如下：

– https://www.jb51.net/article/223798.htm
– https://blog.csdn.net/qq_41577134/article/details/119956038

还有更详细的一篇是《vue2 升级至 vue3  项目技术栈升级攻略》，讲述从 Vue2 到 Vue3 的基本迁移步骤。

首先是依赖层面 package.json 更新版本依赖，

然后在代码层面，依次，

1）new Vue() 改写为 createApp()。因为 vue2 使用 new Vue() 创建 vue 实例，vue3 通过 createApp() 创造实例。

2) Vue.prototype 改写为 app.config.globalProperties

3）Vue.extend 废弃，如果要拓展组件要使用 extends 属性

4）Vue 全局方法改写为实例的方法

5）filter 弃用，可以通过 compute 定义函数代替；如果是全局定义的 filter 方法，可以通过定义 filter 全局常量来代替

6）event bus 废弃，可自行实现一个 event bus 封装

7) Vue.set this.$set 废弃

8.) vuex 修改

9) vue-router 修改

据说完成以上几个方面的修改，大多数 vue2 项目即可完成技术栈到 vue3 的迁移。

参考链接：

– https://www.cnblogs.com/thinkingthigh/p/15529082.html

最后附上一个语法书写上的解释，对老夫这样的小白有用：