5.1 ViewModel 与数据绑定

在鸿蒙开发中，ViewModel 和数据绑定是实现界面与数据逻辑分离的核心技术。它们可以帮助开发者更高效地管理应用状态，并动态更新界面内容。

5.1.1 ViewModel 的概念

ViewModel 是一种专注于管理 UI 相关数据的组件，它通过将数据和业务逻辑从界面层中分离出来，使代码更加清晰和可维护。

ViewModel 的特点：

  • 独立性：与 UI 无关，便于测试和复用。
  • 状态管理：集中管理界面状态，避免直接操作界面元素。
  • 数据驱动：通过绑定机制实现数据变化驱动 UI 更新。

示例：创建一个简单的 ViewModel

@Entry
@Component
struct CounterViewModel {
  @State count: number = 0

  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
}

5.1.2 数据绑定的概念

数据绑定是将 ViewModel 中的数据与 UI 元素进行关联的技术。鸿蒙支持单向和双向数据绑定：

  • 单向绑定：数据流从 ViewModel 到 UI。
  • 双向绑定：数据流可以从 UI 到 ViewModel，也可以从 ViewModel 到 UI。

示例：单向数据绑定

@Entry
@Component
struct CounterView {
  @State count: number = 0

  build() {
    Text(`当前计数：${this.count}`)
    Button("增加").onClick(() => this.count++)
  }
}

示例：双向数据绑定

@Entry
@Component
struct InputViewModel {
  @State inputText: string = ""

  build() {
    TextField({ placeholder: "请输入文本", value: this.inputText })
      .onChange((newValue) => this.inputText = newValue)
    Text(`输入的内容：${this.inputText}`)
  }
}

5.1.3 ViewModel 与数据绑定的协作

ViewModel 和数据绑定的结合可以显著提高开发效率。例如：

  • ViewModel 提供业务逻辑和状态管理。
  • 数据绑定实现 ViewModel 和 UI 的实时同步。

示例：结合使用 ViewModel 和数据绑定

@Entry
@Component
struct CounterApp {
  @State counter: CounterViewModel = new CounterViewModel()

  build() {
    Column() {
      Text(`计数值：${this.counter.count}`)
      Row() {
        Button("增加").onClick(() => this.counter.increment())
        Button("减少").onClick(() => this.counter.decrement())
      }
    }
  }
}

5.1.4 小结

ViewModel 和数据绑定是鸿蒙开发中实现界面与逻辑分离的重要工具。通过使用它们，开发者可以更好地管理应用状态，提高代码的可维护性和复用性。在实践中，建议尽可能将复杂的逻辑放入 ViewModel，并使用数据绑定同步 UI 和数据变化。

Last Updated::