Vue3 开发新范式，不用`ref/reactive`，不用`ref.value`

[zhennann]

什么是 Cabloy-Front ？

Cabloy-Front 是一款支持 IOC 容器的 Vue3 框架。不用ref/reactive，不用ref.value，不用pinia

与 UI 库的配合

Cabloy-Front 可以搭配任何 UI 库使用，并且内置了几款 UI 库的项目模版，便于开箱即用，包括：

• antdv
• element-plus
• quasar
• vuetify

特性

Cabloy-Front 为 Vue3 引入了以下鲜明特征：

• 不用 ref/reactive：因为在大多数场景下，不需要使用 ref 和 reactive
• 不用 ref.value：因为在 Cabloy-Front 中定义响应式变量更加直观，不再需要 ref 语义
• 不用 pinia：因为 Cabloy-Front 提供了 IOC 容器，可以更加灵活的定义和使用全局对象

动图演示

演示：不用ref/reactive，不用ref.value

1. 定义响应式状态

@Local()
export class MotherPageCounter extends BeanMotherPageBase {
  counter: number = 0;

  inrement() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }
}

2. 使用响应式状态

@Local()
export class RenderPageCounter extends BeanRenderBase {
  render() {
    return (
      <div>
        <div>counter(ref): {this.counter}</div>
        <button onClick={() => this.inrement()}>Inrement</button>
        <button onClick={() => this.decrement()}>Decrement</button>
      </div>
    );
  }
}

演示：依赖注入

1. 逻辑抽离

将counter逻辑抽离出来，创建一个Counter Bean

@Local()
export class LocalCounter extends BeanBase {
  counter: number = 0;

  inrement() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }
}

2. 在组件中注入并使用

@Local()
export class MotherPageCounter extends BeanMotherPageBase {
  @Use()
  $$counter: LocalCounter;
}

@Local()
export class RenderPageCounter extends BeanRenderBase {
  render() {
    return (
      <div>
        <div>counter(ref): {this.$$counter.counter}</div>
        <button onClick={() => this.$$counter.inrement()}>Inrement</button>
        <button onClick={() => this.$$counter.decrement()}>Decrement</button>
      </div>
    );
  }
}

框架已开源： https://github.com/cabloy/cabloy-front

[zhennann]

在面向大型的业务开发场景中，需要两个层面的架构设计：
1. 与界面交互的架构，这个使用 vue3 setup 来做
2. 与业务相关的架构，这个使用 ioc 容器来做。大量的工程实践证明，在业务层面，class 比 function 好用很多

[shizhibuyu2023]

很多年不写 class 了，你懂我意思吧

[wu67]

不如叫 javue 或者 sprivue 算了...

[zhennann]

@kneo 那么什么是反模式呢？为什么那么多人纠结用 ref 还是 reactive ，为什么有的地方推荐 ref 而不是 reactive ，为什么 ref.value 无法规避。为什么代码多了一样乱。

[dai269619118]

为什么我还是觉得 vue2 好用

[tikazyq]

开始想来吐槽闭门造车，但后来发现这个开源项目专业搞笑的

https://github.com/cabloy/cabloy-front/issues/1

---

Why is mother?

index.vue is just a facade used to define Vue component. After invoking the useMother function, the work is transferred to mother.ts. If necessary, the definitions of props, emits and slots are all in mother.ts, and most business logics will also be placed in mother.ts

This is just like the behavior of lions: the male lions are the facade, and the female lions do the work. Therefore, if you think of index.vue as father, then mother.ts is the one who actually does the work

[coolcoffee]

相比.value ，我更不想写 this 。在 vue 里面写 jsx ，像比较方便的双向绑定都丢失了，写成两不像心智负担反而更大。

所以为啥不用 react 呢？

[Rrrrrr]

我也觉得 react 好，搞了几年 vue2 再也不想写

[zhennann]

@coolcoffee 为什么不用 react ？参见我上面的回复。在面向大型的业务开发场景中，需要两个层面的架构设计。否则，代码多了一定会乱

[Ma4cus]

我记得 vue 官方文档不是不推荐在 vue3 使用 class 写法吗

[zhennann]

@Ma4cus 确实有几个 class 的实现效果不理想，所以 vue 官方不推荐。不理想的原因是他们把 class 用在了“与界面交互的架构”层面。而 cabloy-front 在“与界面交互的架构”层面仍然使用 vue setup 语法，在“与业务相关的架构”层面使用 class 和 ioc 。所以，与官方的说法并不相悖，只是站在不同的角度做的判断。

[miaowo]

不喜欢用 class 写

[charlie21]

“在组件中注入并使用” 这一步仅仅是让组件消费数据。若是让组件消费一个数据，则直接使用 vue composable 提供一个数据足矣

依赖注入可以直接用 inversify.js 的 container , inversify.js 的 container 的定义是支持 class 的，一个 container 单例是独立于 vue instance 的，哪个组件需要它就 import 就完事了，根本不用耦合到 vue instance 里

[leokun]

我觉得还是挺有意思的，虽然一直很抵制继承、装饰器等类上的用法
不过在做编辑器等复杂的项目时，代码更加清晰可读。
现在 vue 、react 都是组合式、函数式，op 这个库有点过于固执己见了。

[chuck1in]

等等，这个为啥要发到 node 不发到前端开发节点。

[zhennann]

@charlie21 cabloy-front 提供了两类 container ，一类如你所说是 global container ，实现全局状态的消费，可以直接代替 pinia 的能力。还有一类是组件 container ，与 vue instance 绑定。提供 vue instance 级别 container 的好处就是，在这个容器中的所有 bean 实例都可以在 vue instance 这个范围共享和消费数据。这种机制其实要比 composable 的耦合性低很多了

[zhonj]

vue 本来就是要简单上手，学习成本低，你倒好给 vue3 套了一层复杂 buff 。用这玩意代码简洁灵活，也要看人的，后端写 java 的都那样分层了，业务逻辑一多一复杂还不是一坨屎。最近写前端颇有感悟啊，一个 js 这么轻的语言，npm i 一下 2000 多个依赖，前端这群家伙是真的闲没事就去造轮子

[brookegas]

被 Spring 大法霍霍过的 Java 程序员，不管什么都喜欢来个 IOC“容器”
连 js 这种人畜无害的前端语言都不放过

看了评论，幸好大多数人还都是正常的

[Cbdy]

笑死，请不要闭门造车

[xntzmk]

感觉写 this 更让人讨厌的