在鸿蒙开发中，如何实现MVVM架构模式？

Question

在鸿蒙开发中，如何实现MVVM架构模式？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

MVVM（Model-View-ViewModel）是一种流行的架构模式，它将用户界面与业务逻辑分离，使得代码更加模块化和可测试。

// View（界面部分）
@Entry
@Component
struct Index {
  @State message: string = 'Hello, world!';

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      
      Button('Change Message')
        .onClick(() => {
          this.message = 'Message changed!';
        })
        .width('100%')
        .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

// ViewModel（业务逻辑部分）
class MainViewModel {
  message: string = 'Hello, world!';

  changeMessage() {
    this.message = 'Message changed!';
  }
}

// Model（数据模型部分）
class MessageModel {
  private message: string;

  constructor(message: string) {
    this.message = message;
  }

  getMessage(): string {
    return this.message;
  }

  setMessage(message: string): void {
    this.message = message;
  }
}

Index组件代表View，MainViewModel代表ViewModel，它处理业务逻辑并与View通信。MessageModel代表Model，它负责存储和管理数据。

参见：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。