Skip to content

核心 MVVM 组件

本文档涵盖了 MVVM UI 框架的基本构建块:ViewModel 系统、Observable 模式实现、命令系统和装饰器系统。这些组件协同工作,提供响应式数据绑定、状态管理和命令执行功能。

有关 ViewModels 和 UI 元素之间的数据绑定信息,请参见数据绑定。有关 UI 管理和生命周期,请参见UI 管理系统

ViewModel 系统

ViewModel 类作为框架中所有 ViewModel 的基础。它继承了 Observable 以提供响应式功能,并包含对命令、验证和状态管理的内置支持。

ViewModel 生命周期和状态管理

ViewModels 维护几个重要的状态属性:

属性类型描述
isDirtyboolean指示 ViewModel 是否已被修改
isValidboolean指示所有验证规则是否通过
isValidatingboolean指示验证是否正在进行中
hasValidationErrorsboolean指示是否有任何验证错误

ViewModel 生命周期包括:

  1. 初始化 - 构造函数调用 onInitialize() 进行自定义设置
  2. 属性变更 - 在属性变更时自动标记脏状态和验证
  3. 验证 - 属性级别和完整验证支持
  4. 重置 - 清除验证错误和脏状态
  5. 销毁 - 清理命令、观察者和验证错误

命令系统

命令系统通过命令模式为处理用户交互和业务逻辑提供了结构化的方法。命令可以是同步或异步的,可以有参数或无参数,并支持条件执行。

命令执行流程

ViewModel 中的命令可以通过多种路径执行:

  • 装饰器注册的命令 - 通过 @command 装饰器注册的命令
  • 手动创建的命令 - 通过 createCommand() 方法创建的命令
  • 直接方法调用 - ViewModel 方法的类型安全执行

Observable 系统

Observable 系统为 ViewModel 中的响应式属性提供了基础。当属性发生变化时,观察者会自动收到通知,从而通过数据绑定实现自动的 UI 更新。

装饰器系统

装饰器通过响应式功能、命令注册和计算属性增强 ViewModel 类。框架提供了几个关键装饰器:

核心装饰器

装饰器用途用法
@viewModel标记类为 ViewModel类装饰
@observable使属性响应式属性装饰
@computed创建计算属性getter 装饰
@command注册命令方法方法装饰
@validate添加属性验证属性装饰

组件集成

核心 MVVM 组件协同工作,提供完整的响应式系统。以下是它们在典型 ViewModel 中的集成方式:

完整的 ViewModel 示例

集成流程

  1. 类定义 - @viewModel 装饰器注册类
  2. 属性增强 - @observable 使属性响应式
  3. 计算属性 - @computed 创建具有依赖跟踪的派生值
  4. 命令注册 - @command 将方法注册为可执行命令
  5. 数据绑定 - 属性自动与 UI 元素同步
  6. 状态管理 - 验证、脏状态跟踪和生命周期管理

这种集成实现了声明式编程模型,其中 ViewModel 定义业务逻辑和状态,而框架自动处理响应式更新和 UI 同步。

基于 MIT 许可证发布