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. 定义响应式状态

typescript 复制代码
@Local()
export class MotherPageCounter extends BeanMotherPageBase {
  counter: number = 0;

  inrement() {
    this.counter++;
  }

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

2. 使用响应式状态

typescript 复制代码
@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

typescript 复制代码
@Local()
export class LocalCounter extends BeanBase {
  counter: number = 0;

  inrement() {
    this.counter++;
  }

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

2. 在组件中注入并使用

typescript 复制代码
@Local()
export class MotherPageCounter extends BeanMotherPageBase {
  @Use()
  $$counter: LocalCounter;
}
typescript 复制代码
@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

相关推荐
叫我阿柒啊7 小时前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
烛阴9 小时前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓9 小时前
Typescript入门-类型断言讲解
前端·javascript·typescript
Thetimezipsby12 小时前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
流影ng14 小时前
【TypeScript】闭包
typescript
葡萄城技术团队15 小时前
TypeScript 队列实战:从零实现简单、循环、双端、优先队列,附完整测试代码
typescript
烛阴1 天前
【TS 设计模式完全指南】从“入门”到“劝退”,彻底搞懂单例模式
javascript·设计模式·typescript
lypzcgf1 天前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
叫我阿柒啊2 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
江拥羡橙2 天前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos