前言
本文基于鸿蒙Next beta1,beta2的新特性暂未深入研究和使用,且目前beta2已经可以试用。
现在客户端所流行的结构无非就是MVVM
或者MVI
。MVI的特点是不仅把数据变化做了响应,连交互都封装了,鸿蒙目前最适合的是MVVM。 鸿蒙使用声明式UI开发框架,那么和所有的流行的大前端框架一样,我们需要处理前端组件间的数据通信和变化响应,也就是所谓的状态管理。而MVVM中的viewmodel可以狭义的理解为状态管理。
MVVM
View是用户界面的呈现,负责展示数据和接收用户输入。它确实可以触发事件,但这些事件不会直接修改Model,而是通过调用ViewModel中的方法来间接实现。ViewModel封装了对Model数据的操作和业务逻辑,实现了View和Model之间的解耦。
ViewModel是这一架构的核心,它监视Model的变化并自动更新View(通常借助于数据绑定机制)。同时,ViewModel也为View提供可观察的数据和命令(即处理View事件的方法),使得当View发生变化时(例如用户点击),ViewModel能够捕捉这些事件并相应地更新Model,或者执行其他操作,如发起网络请求。因此,ViewModel不仅需要在Model更新时通知View响应,还要处理View事件以间接影响Model,确保了数据流动的单向性或通过ViewModel的双向绑定机制来维护数据同步和状态一致性。
案例
讲完了最基本的MVVM的概念。下面我们研究一个案例。
我有一个组件Parent,这个Parent是页面的基本布局,有一个数据源提供了一组List items,Parent要用类似于RecyclerView这样的布局把items展示出来,这个items有一个基本的功能就是select选中,我还有一个bar组件,这个组件在Parent里,他的作用是对items执行全选,以及打印选中的组件们。
`export class Item {
public isSelect: boolean = false
public name: string = ''
}
@Component
export struct Parent {
@State childs: Item[] = []
build() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.childs, (item: Item, _index) => {
ListItem() {
Child({data: item})
}
}, (item: string) => item)
}
}
}
@Component
export struct Child {
@State data: Item = new Item()
build() {
Column() {
Text(`${