ArkUI与MVVM模式的诗和远方

大家好，我是 V 哥。今天的内容我们来聊一聊 MVVM 模式在 鸿蒙原生应用开发中的使用， 比如做过 Android开发的兄弟应该清楚，MVVM（Model + View + ViewModel）模式是一种设计模式，用于分离应用程序的业务逻辑、用户界面和数据模型。这种模式特别适用于构建富客户端应用程序，如桌面或移动应用。在MVVM模式中，每个部分都有其特定的职责。

ArkUI的MVVM工作流程

先来看一下 MVVM 的基本概念

1. Model（模型）：代表应用程序的数据结构和业务逻辑。它负责存储数据以及可能的数据验证、数据转换等。
2. View（视图）：用户界面，负责显示数据（Model）和接收用户交互。
3. ViewModel（视图模型）：作为Model和View之间的中介，包含从Model中检索数据的逻辑，并提供数据给View显示。它还处理View发起的命令，如用户输入，然后更新Model。

在ArkUI中，MVVM模式的工作流程如下：

• （1）自定义组件通过执行其build()方法或者@Builder装饰的方法来渲染UI，即ViewModel可以渲染View。
• （2）View可以通过相应的event handler来改变ViewModel，即事件驱动ViewModel的改变。另外，ViewModel提供了@Watch回调方法来监听状态数据的改变。
• （3）在ViewModel被改变时，需要同步回Model层，这样才能保证ViewModel和Model的一致性，即应用自身数据的一致性。
• （4）ViewModel结构设计应始终适配自定义组件的构建和更新，这也是将Model和ViewModel分开的原因。

目前之所以有很多关于UI构造和更新的问题，都是因为ViewModel的设计没有很好地支持自定义组件的渲染，或者试图去让自定义组件强行适配Model层，而中间没有用ViewModel来进行分离。例如，一个应用程序直接将SQL数据库中的数据读入内存，而这种数据模型不能很好地直接适配自定义组件的渲染。因此，在应用程序开发中需要适配ViewModel层。

了解了基本概念后，V 哥通过一个业务场景案例来介绍具体的应用。

业务场景案例：电话簿应用

假设我们要开发一个简单的电话簿应用，该应用允许用户查看联系人列表、编辑和删除联系人信息。

先来看 Model 层的实现：

1. Model层

首先，我们定义Model层，包括Person类和AddressBook类。

// Person.ts
export class Person {
  id: number;
  name: string;
  phone: string;

  constructor(id: number, name: string, phone: string) {
    this.id = id;
    this.name = name;
    this.phone = phone;
  }
}

// AddressBook.ts
import { Person } from "./Person";

export class AddressBook {
  private contacts: Person[] = [];

  addContact(person: Person) {
    this.contacts.push(person);
  }

  removeContact(id: number) {
    this.contacts = this.contacts.filter(contact => contact.id !== id);
  }

  getContacts() {
    return this.contacts;
  }
}

Model 层的实现比较简单，Person 是实体模型，表示用户信息实体，AddressBook是地址溥操作模型，并提供添加，删除和获取用户功能。

2. ViewModel层

接下来，我们创建ViewModel层，它将处理业务逻辑并与View层通信。

// 假设我们已经定义了Person和AddressBook类
import { AddressBook } from "./AddressBook";
import { Person } from "./Person";

@ViewModel
class PhoneBookViewModel {
  private addressBook: AddressBook;
  private selectedContact: Person | null = null;

  constructor() {
    this.addressBook = new AddressBook();
    // 初始添加一些联系人
    this.addressBook.addContact(new Person(1, "Weige", "1234567890"));
    this.addressBook.addContact(new Person(2, "Vin", "0987654321"));
  }

  getContacts() {
    return this.addressBook.getContacts();
  }

  selectContact(id: number) {
    this.selectedContact = this.addressBook.getContacts().find(contact => contact.id === id);
  }

  deleteContact(id: number) {
    this.addressBook.removeContact(id);
    this.selectedContact = null;
  }
}

PhoneBookView组件使用ForEach循环来渲染所有联系人，并为每个联系人提供一个点击事件，以便在点击时选择该联系人。如果选择了联系人，它还会显示该联系人的详细信息和一个删除按钮。

3. View层

最后，我们创建View层，它将显示数据并处理用户交互。

// 导入必要的模块和装饰器
import { PhoneBookViewModel } from "./PhoneBookViewModel";
import { Component, Entry, State } from "@ohos.arkui";

// 使用@Component装饰器标记这个结构体为一个组件
@Component
struct PhoneBookView {
  // 使用@State装饰器声明一个状态变量，用于存储选中的联系人
  @State selectedContact: Person | null = null;

  // ViewModel实例
  viewModel: PhoneBookViewModel = new PhoneBookViewModel();

  // build函数用于构建UI
  build() {
    Column() {
      // 使用ForEach循环渲染所有联系人
      ForEach(this.viewModel.getContacts(), (contact) => {
        // 为每个联系人创建一个行容器
        Row() {
          // 显示联系人姓名和电话
          Text(contact.name).fontSize(20);
          Text(contact.phone).fontSize(20);
          // 为每个联系人添加点击事件，选择联系人
          this.onClick(() => {
            this.selectedContact = contact;
          });
        }
      });

      // 如果有选中的联系人，显示详细信息
      if (this.selectedContact) {
        Column() {
          Text(`Selected Contact: ${this.selectedContact.name}`);
          Text(`Phone: ${this.selectedContact.phone}`);
          Button("Delete").onClick(() => {
            this.viewModel.deleteContact(this.selectedContact.id);
            this.selectedContact = null; // 清除选中状态
          });
        }
      }
    }
  }
}

// 使用@Entry装饰器标记这个组件为页面的入口组件
@Entry
struct Main {
  build() {
    PhoneBookView();
  }
}

解释一下

• PhoneBookView结构体定义了电话簿应用的UI。
• 使用ForEach循环遍历viewModel中的所有联系人，并为每个联系人创建一个包含姓名和电话的Row容器。
• 为每个联系人添加点击事件，当点击时，将该联系人设置为选中状态。
• 如果有选中的联系人，显示其详细信息和一个删除按钮。
• 删除按钮的点击事件会调用viewModel的deleteContact方法来删除选中的联系人，并清除选中状态。

最后小结一下

在这个案例中，AddressBook和Person类构成了Model层，负责存储和处理电话簿数据。PhoneBookViewModel作为ViewModel层，处理业务逻辑并提供数据给View层。PhoneBookView则是View层，负责显示数据和接收用户输入。

这种分离确保了代码的清晰性和可维护性，同时也使得单元测试变得更加容易。ViewModel层的引入，使得View层只需关注如何展示数据，而业务逻辑则由ViewModel层处理，这样可以在不改变View层的情况下，重用ViewModel层的代码。关注威哥爱编程，争做鸿蒙先锋队员。