Cabloy-Front是一款支持IOC容器的Vue3框架。它摒弃了使用 ref/reactive 、 ref.value 和 pinia 的方式。

Cabloy-Front可以与任何UI库搭配使用，内置了几款UI库的项目模板，包括：

• antdv
• element-plus
• quasar
• vuetify

对于Vue3，Cabloy-Front引入了以下鲜明特征：

• 不用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 (
      

        
counter(ref): {this.counter}
         this.inrement()}>Inrement
         this.decrement()}>Decrement
      
    );
  }
}

演示：依赖注入

1. 逻辑抽离

@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 (
      

        
counter(ref): {this.$$counter.counter}
         this.$$counter.inrement()}>Inrement
         this.$$counter.decrement()}>Decrement
      
    );
  }
}

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