鸿蒙MVVM开发模式

• Model：负责存储和管理应用的数据以及业务逻辑，不直接与用户界面交互。通常从后端接口获取数据，是应用程序的数据基础，确保数据的一致性和完整性。
• View：负责用户界面展示数据并与用户交互，不包含任何业务逻辑。它通过绑定ViewModel层提供的数据来动态更新UI。
• ViewModel：负责管理UI状态和交互逻辑。作为连接Model和View的桥梁，ViewModel监控Model数据的变化，通知View更新UI，同时处理用户交互事件并转换为数据操作。

鸿蒙子组价是不可以访问父组件的数据，但是在业务中，子组件有加减，加减后的数据同样也得更新到父组件中去，例如购物车功能，单个商品增加，父组件中的总额就必须进行同步，因此通过使用适配器：@Prop，@Link，prop是单项通信，link是双向通信

@Entry组件基本只用于处理页面构建逻辑，而不处理大量与页面设计无关的内容。

@Entry
@Component
struct Index {
  @State isFinished: boolean = false;
  @State data: TodoListData = new TodoListData();

  build() {
    Column() {
      // 全部待办
      TodoComponent()

      // 全选
      AllChooseComponent({isFinished: this.isFinished})

      List() {
        ForEach(this.data.planList, (item: string) => {
          // 待办事项1
          ThingsComponent({isFinished: this.isFinished, things: item})
            .margin(5)
        })
      }

    }
    .height('100%')
    .width('100%')
    .margin({top: 5, bottom: 5})
    .backgroundColor('#90f1f3f5')
  }

MVVM文件结构说明

• src
  • ets
    • pages ------ 存放页面组件
    • views ------ 存放业务组件
    • shares ------ 存放通用组件
    • service ------ 数据服务
      • app.ts ------ 服务入口
      • LoginViewMode ----- 登录页ViewModel
      • xxxModel ------ 其他页ViewModel

分层设计技巧

Model层

• model层存放本应用核心数据结构，这层本身和UI开发关系不大，让用户按照自己的业务逻辑进行封装。

ViewModel层

注意：

ViewModel层不只是存放数据，他同时需要提供数据的服务及处理，因此很多框架会以“service”来进行表达此层。

• ViewModel层是为视图服务的数据层。它的设计一般来说，有两个特点：

  1、按照页面组织数据。

  2、每个页面数据进行懒加载。

View层

View层根据需要来组织，但View层需要区分一下三种组件：

• 页面组件：提供整体页面布局，实现多页面之间的跳转，前后台事件处理等页面内容。
• 业务组件：被页面引用，构建出页面。
• 共享组件：与项目无关的多项目共享组件。

原文地址：https://blog.csdn.net/jian11058/article/details/145240361

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！