大家好，我是 V 哥。今天的内容我们来聊一聊 MVVM 模式在 鸿蒙原生应用开发中的使用， 比如做过 Android开发的兄弟应该清楚，MVVM（Model + View + ViewModel）模式是一种设计模式，用于分离应用程序的业务逻辑、用户界面和数据模型。这种模式特别适用于构建富客户端应用程序，如桌面或移动应用。在MVVM模式中，每个部分都有其特定的职责。
ArkUI的MVVM工作流程
先来看一下 MVVM 的基本概念
Model（模型）：代表应用程序的数据结构和业务逻辑。它负责存储数据以及可能的数据验证、数据转换等。
View（视图）：用户界面，负责显示数据（Model）和接收用户交互。
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层的代码。关注威哥爱编程，争做鸿蒙先锋队员。
