简介

视频

• 观看更多视频

什么是Zova？

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

与UI库的配合

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

• antdv
• element-plus
• quasar
• vuetify
• empty：可以在此基础上使用其他 UI 库

在线演示

• vue3 + ts + tsx + tailwindcss + daisyui

特性

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

1. 不用ref/reactive, 不用ref.value：有了 IOC 容器的加持，定义响应式状态不再需要ref/reactive。因为不用ref，自然也就不用再写大量的ref.value
2. 化类型于无形：Zova 采用依赖注入与依赖查找相结合的策略，大量减少装饰器函数的使用。优先使用依赖查找可以达到化类型于无形的开发体验，也就是不需要标注类型就可以享受到类型编程的诸多好处，从而让我们的代码始终保持简洁和优雅，进而显著提升开发效率，保证代码质量
3. 模块化体系：在一个大型的 Web 业务系统当中，随着业务的增长和变更，为了避免代码失控，有必要将系统拆分为一个个相对独立的模块，这就是 Zova 采用模块化体系的缘由。在 Zova 中，一个模块就是一个天然的拆包边界，在 build 构建时，自动打包成一个独立的异步 Chunk，告别 Vite 配置的烦恼，同时可以有效避免构建产物的碎片化。特别是在大型业务系统中，这种优势尤其明显

动图演示

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

1. 定义响应式状态

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

export class ControllerPageCounter {
  count: number = 0;

  increment() {
    this.count++;
  }

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

2. 使用响应式状态

采用 tsx 语法使用count

export class RenderCounter {
  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 RenderCounter {
  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>
    );
  }
}