开发vue3，真的可以不用ref/reactive了，也不需要ref.valueZova 是一款支持 IOC 容器的 V

什么是Zova？

Zova 是一款支持 IOC 容器的 Vue3 框架。有了 IOC 容器的加持，定义响应式状态不再需要ref/reactive，也不再需要ref.value

与UI库的配合

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

antdv
element-plus
quasar
vuetify

特性

Zova 为 Vue3 引入了以下鲜明特征：

不用ref/reactive：有了 IOC 容器的加持，定义响应式状态不再需要ref/reactive
不用ref.value：因为不用ref，自然也就不用再写大量的ref.value
模块化体系：在一个大型的 Web 业务系统当中，随着业务的增长和变更，为了避免代码失控，有必要将系统拆分为一个个相对独立的模块，这就是 Zova 采用模块化体系的缘由。因此，在 Zova 中，实际的业务代码开发都是在模块中进行

动图演示

No ref/reactive

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

1. 定义响应式状态

在组件中定义一个响应式变量count，并且添加两个方法修改变量的值

export class ControllerPageCounter {
  count: number = 0;

  increment() {
    this.count++;
  }

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

2. 使用响应式状态

采用 tsx 语法使用count

export class RenderPageCounter {
  render() {
    return (
      <div>
        <div>count(ref): {this.count}</div>
        <button onClick={() => this.increment()}>Increment</button>
        <button onClick={() => this.decrement()}>Decrement</button>
      </div>
    );
  }
}

演示：依赖注入

1. 逻辑抽离

将count逻辑抽离出来，创建一个CounterBean

@Local()
export class Counter {
  count: number = 0;

  increment() {
    this.count++;
  }

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

2. 在组件中注入并使用

export class ControllerPageCounter {
  @Use()
  $$counter: Counter;
}

export class RenderPageCounter {
  render() {
    return (
      <div>
        <div>count(ref): {this.$$counter.count}</div>
        <button onClick={() => this.$$counter.increment()}>Increment</button>
        <button onClick={() => this.$$counter.decrement()}>Decrement</button>
      </div>
    );
  }
}

框架已开源： github.com/cabloy/zova

文章更新说明

本文章首发于2024-05-16，今天是2024-10-05，为回馈大家的信任与支持，Zova又提供了许多重磅的功能特性更新，代码风格更加简洁、优雅，开发体验有显著的提升。现将部分更新列举如下，希望总有一款能契合君心：

VSCode插件：通过右键菜单提供大量工具，显著提升开发体验，包括四大类能力：Create/Init/Refactor/Tools
SSR：内置开箱即用的 SSR 解决方案，同时支持 B 端和 C 端应用
Model: 统一数据源：基于TanStack Query提供了 MVC 架构中的 Model 机制，通过 Model 封装统一数据源，从而规范数据使用方式，简化代码结构，提升代码的可维护性
CSS-in-JS: 样式&主题：通过TypeStyle 实现了css-in-js的能力，让样式的开发更加灵活、便捷，同时提供了开箱即用的 theme 切换能力
全新的组件开发体系：支持泛型组件、支持页面参数的类型化、支持大代码组件的横向代码拆分（拆分逻辑代码、拆分渲染代码、拆分样式代码）
简洁而强大的IOC容器：在实际开发当中，会遇到三个场景的状态共享：组件内部状态共享、组件之间状态共享、全局状态共享。在传统的 Vue3 当中，分别采用不同的机制来实现，而在 Zova 中只需要采用统一的 IOC 容器机制

开发vue3，真的可以不用ref/reactive了，也不需要ref.value