likes
comments
collection
share

用Vue3重构了我的开源项目,真香了,还丢掉了VueX。

作者站长头像
站长
· 阅读数 53

背景

做了一个叫rximg的开源项目,是想将图像处理的流程做成拖拖乐的形式。项目开始时候采用的是Vue.js 2.0,是因为自己多年前用过Vue2,较熟悉这一套技术栈。但开发到后期,发现依赖的一些开源框架,纷纷开始支持vue3和ts,Vue2的版本不更新了。因此,半路对整体框架进行大改,改完之后感受良好。

这是项目的演示。

用Vue3重构了我的开源项目,真香了,还丢掉了VueX。

rximg 读取图片并显示

这是项目地址:github.com/rximg/rximg

依赖库变化

旧版本新版本变动类型
Vue.js 2Vue.js 3升级
vue-clivite更换
JavascriptTypeScript升级
Ant Design Vue 1.xAnt Design Vue 3
vuedraggable-next升级
vuex删除
antv-x6-vue新增
vueuse新增
vue-socket.iosocket.io-client更换

选项式VS组合式

高内聚低耦合

这次更新最大的改变是用VUE3中的reactive和组合式API,重构了项目中的状态管理的这一部分。VUE2中,状态管理是由VUEX框架维护一个全局的状态树,然后通过一系列定义在getters、mutations中的接口将状态响应式的映射到View层。而这种映射过程,是以向VUE的选项式API里填充代码的形式实现的。可能这种方式是符合前端函数式的大趋势,但是对于用惯了面向对象的我来说,用的是十分难受。

我本人写的比较多的是后端和算法,用python用的多。通常来讲,面向对象有个好处就是可以把数据和逻辑搞得"高内聚,低耦合"。面向对象最基本的概念就是,一个对象不仅封装了自己的数据,还提供了操作自己数据的方法。而选项式的API拉远了那些本来应该很近的数据与逻辑,暴露了很多不需要暴露的逻辑,增加了思维负担。

丢掉了VUEX

因此,我在重构时候,我将旧的模块重新划分了一遍,然后发现,我这个项目其实也不需要一个VUEX了。我这里并没有将VueX换成Pinia,而是直接将VueX干掉了。因为,Vue2中一切是选项式的,我需要一个VueX这样的东西将数据响应式的嵌入项目。但有了组合式的API后,VueX唯一剩下作用就是提供一个全局的获取数据入口,这个入口在多个组件中共享。而这个功能可以用别的简单方式实现。

面向对象的方式管理了数据和逻辑

最常用的一个对象以这种方式管理,避免了这些数据和逻辑分散到各个Vue的选项式的模板中去。

export interface RXFunctionInterface {
    uuid: string | ComputedRef<string>
    args: Record<string, RXArg>
    op: string
    name: string
    type: string
    from: string
    returnType?: string
    extraInPorts?: Record<string, number>
    toString(): string
    tojson(): any
    md5(): string
    onSubmit():void

}

\

迁移中的注意事项

解包需要注意

ref变量在使用时候需要频繁的在.value中拆包和组包,而且有的地方会隐式的自动解包,细节非常多,需要十分的注意。

Ref类型声明

可以将类变量申明为Ref类型,这样就知道这个变量是响应式的修改的,但reactive变量没有这种类型声明,在修改时候就无法判断是被修改的变量是不是响应式的。不过,官方似乎也不建议给reactive变量做响应式的类型声明。

深层次的响应式转化

reactive是递归的将深层次变量都转化为响应式的,如果只对第一层做响应式转换,需要用shallowReactive

别纠结了换Vite吧

在迁移之初,我还是沿用vue-cli构建工程,各种问题不断,解决问题的资料也不好查,后来直接换成vite,把项目重新配置了一遍就好了。所以对于Vue3和ts的项目而言,还是别纠结了直接用vite吧。

Volar

我是用vscode的,Vue的插件要由Vetur换成Volar。

对于旧版本的选项式代码如何处理

旧版本的选项式的代码很多可以直接用,或者稍微修改一下直接用。现在的项目中依然有选项式的.vue文件。Vue3对选项式的兼容,对于这次升级的平滑度还是起了很大的作用。

不过由于之前代码和VueX是强耦合,而现在去掉了VueX,代码逻辑始终要大改,就趁这个机会把绝大部分component换成组合式的了。

引用

《用Vue3重构了我的开源项目,真香了,还丢掉了VueX。》

《[RxImg]基于响应式数据流的图像处理新范式》

转载自:https://juejin.cn/post/7132816291165339684
评论
请登录