项目场景:

vue2转vue3

个人来讲吧,vue2也好,vue3也好,单独开发都挺好用的,各有优缺点,但是从vue2转到vue3我是多看一眼都是感觉要命的。。。。
这两个问题,找问题花了近四个小时,然而改问题最多半个小时就改好了,无语至极啊啊啊啊


问题1描述

Vue-prototype is no longer available in Vue 3. Use app.config globalProperties instead.

从这个报错信息,其实很简单,无非就是说Vue-prototypevue3中遗弃了,不用了请使用
app.config globalProperties代替,可问题是,我的项目已经都替换了啊!!!!
在这里插入图片描述
在这里插入图片描述


问题2描述

警告:Unhandled error during execution of component update
报错:TypeError: Right-hand side of 'instanceof' is not an object
报错:TypeError: Cannot read property 'emitsOptions' of null

从这个警告和报错来看吧,无非就是说右侧不是一个对象,翻译出来就是通常表示在 JavaScript 中使用 instanceof 时,右侧操作数不是一个有效的构造函数
在这里插入图片描述


原因分析:

分析个锤子,我酷酷问Ai
问题1:然而没任何用,给出的都是我已经用过的方法,我都怀疑到某些node_module包的兼容问题了。
问题2:我都感觉Ai回答的都跟我的问题没关系了,但是我问的很详细了,也把报错问题抛出来了提问了,真难搞。。。

问题1问Ai

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

问题2问Ai

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


解决方案:

直接说方法吧,不拖拉
问题1:main.ts中的那个包vue-jsonp,在vue2中,使用Vue.use(VueJsonp)没有任何问题,因为使用Vue.use()就会自动全局注册了,代码里面可以用this.$jsonp或者用实例vm.$jsonp都有效果,但是在vue3中,app.use()其实不会全局注册的,这就导致问题了,都是之前开发的人乱用啊啊啊。。。。
app.use(VueJsonp) 去掉
app.config.globalProperties.$jsonp = jsonp 增加即可
问题2:也很简单,其实是props传参的类型问题
type: Object | null, 换成 type: [Object, null] 即可

讲真的其实就是vue2和vue3的差异导致问题的,有些写法没注意,vue2兼容挺强的所以都没问题,都不会报错,但是在vue3就不行了,哎,其实还是不够仔细。

不过不管怎样,还是解决好啦,希望对各位有所帮助,能作为参考借鉴下。。。

吐槽下Ai,还是不能太依赖,关键时刻,还是得自己多想想。。。

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐