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

来源: 投稿
作者: zhennann
2024-05-16 11:56:00

什么是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 容器,可以更加灵活的定义和使用全局对象

动图演示

No ref/reactive

演示:不用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

展开阅读全文
点击加入讨论🔥(23) 发布并加入讨论🔥
本篇精彩评论
直接用 react 挺好,何苦来糟践 vue。
2024-05-16 13:07
2
举报
确实是新的思维模式,初看起来不太适应。这里不方便发链接,建议你上官网文档了解一下,一定能发现更多有趣的功能特性
2024-05-26 20:27
1
举报
不是许多人都在纠结用ref和reactive吗?如果定义响应式变量不需要ref/reactive,岂不是更好。更何况也就不需要大量的ref.value了
2024-05-26 20:26
1
举报
vue3解除的是this, 你又把this给加毛了... 这种结合页面结构 + ts 的不就是react吗? $$符的变量名也是醉了, 写个业务交互一堆的这玩意儿,你说好?"属实是结合了angular,react,vue三者的糟粕"
2024-05-25 10:10
1
举报
搞个新语言吧,别搞vue了
2024-05-16 16:21
1
举报
23 评论
4 收藏
分享
返回顶部
顶部