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

什么是 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

34 天前

@ceilingyear 一个文件确实能解决问题，但是使用三个文件是为了解耦合，以便更好的适应业务的膨胀。
1. index.vue：在这个文件中，使用 vue3 的语法糖定义组件的 props 和 emits
2. mother.ts：一个 vue 组件实例对应一个 ioc 容器。该容器与 Vue 组件实例绑定，在这个容器中的所有 Class 实例都可以在组件实例范围之内共享数据和逻辑。那么，mother class 就是这个 ioc 容器中的第一个 class 。组件的业务逻辑就从这里展开
3. render.tsx：在这个 render class 中编写 tsx 代码，实现界面渲染。在一个独立的文件中书写 tsx 代码，从而让 tsx 代码更加舒展、从容。不知你是否有如此体验：如果仅仅在一个 SFC 文件写 tsx 代码，总是很局促的。当业务比较复杂的时候，展开很麻烦，代码逻辑不容易区分开

此外，Cabloy-Front 所采用的 class 机制，与社区现有的多个 class 方案有本质的区别，因此，逻辑更清晰，代码更优雅。可以看一下这篇文章：为什么需要 Vue3+IOC： https://front.cabloy.com/zh/guide/start/why.html