Vue2 TS类组件开发的vue3版本迁移方案

用了几年vue,现在比较习惯的开发方式是Vue2+Typescript+类组件(vue-class-component+vue-property-decorator),但自从vue3发布,虽然原生对ts的支持还可以,但vue-class-component支持vue3的v8rc1版本已经两年没有更新,vue-property-decorator从v10开始支持vue3,现在v10rc.3也有16个月没有更新了。vue-class-component的一个issue下大家怨声载道
在这里插入图片描述
这里贴一些这个issue下我比较认同的精选楼层
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
个人意见是,在vue框架下使用TS和VueClassComponent,能以一种比较平衡的状态实现oop,既不至于完全抛弃js的一些比较省事的特性,又不会搞出那种乱七八糟的屎山。
比如下面,作为gis开发者,我很习惯封装一个地图组件,将一些地图和图层的操作暴露出来,能被其他组件应用。这个逻辑在这套开发方式下无比顺滑。
在这里插入图片描述
这里是一个OLMap组件,输出了一个配置接口,下图引用时传入配置项。使用ref注册时,因为import进来的OLMap本身就是class,所以注册的组件可以直接声明为这个class
在这里插入图片描述
在这里插入图片描述
这样可以直接使用OLMap类里公开的变量和函数,而不需要export之类的操作,比如下面这俩函数
在这里插入图片描述
可以使用ref注册的变量直接调用
在这里插入图片描述
这不比仅仅把TS当个类型检测器好使多了嘛,这很OOP,再加上vue-property-decorator提供的各种装饰器,开发体验十分完美。
但是奈何尤大不支持
在这里插入图片描述

在这里插入图片描述
所以当vue3发布到现在,类组件已经遭到事实上的抛弃,咋个迁移就是个问题。
目前看来,要么转向组合式API,vue3的正道。这块简单了解过,尝试过迁移一个大组件,挺麻烦的。所以如果是新项目,可以用它,旧项目迁移的话就有点麻烦。
另一种就是vue-facing-decorator,今年初出现的库,看简介就很了然
在这里插入图片描述
对于这个项目还是很看好的,国人开发者,更新很快,中文文档,将类组件和装饰器结合了,各种写法和vue2那套很相似,但是目前还没在项目里用,但计划下一步尝试用它迁移旧项目。看它在git上热度呢么低有点奇怪,因为vue2版本使用类组件开发的不算主流但也很多,这个库作为原来那套的迁移方案,才三十多个star,着实不应该。

参考
https://github.com/vuejs/vue-class-component/issues/584
https://github.com/facing-dev/vue-facing-decorator

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值