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

最新推荐文章于 2023-12-14 16:37:54 发布

GIS小虫

最新推荐文章于 2023-12-14 16:37:54 发布

阅读量1.3k

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Neuromancerr/article/details/125762198

版权

用了几年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，着实不应该。