第5章：数据驱动UI

数据绑定

5.2.1 数据绑定的基本概念

数据绑定是ArkTS中实现UI与数据同步的核心机制，它允许开发者将数据源与UI组件属性动态关联。当数据发生变化时，绑定的UI会自动更新，无需手动操作DOM。

核心特点：

  • 双向绑定：支持数据到UI（@State）和UI到数据（@Link）的双向同步
  • 表达式支持：可在绑定中使用简单表达式（如字符串拼接、算术运算）
  • 类型安全：基于TypeScript的静态类型检查

5.2.2 基础绑定语法

@Entry
@Component
struct DataBindingExample {
  @State message: string = 'Hello ArkTS'

  build() {
    Column() {
      // 文本内容绑定
      Text(this.message)
        .fontSize(20)
      
      // 样式属性绑定
      Text('Dynamic Color')
        .fontColor(this.message.length > 10 ? Color.Red : Color.Blue)
      
      // 事件绑定
      Button('Change Message')
        .onClick(() => {
          this.message = 'Data binding works!'
        })
    }
  }
}

5.2.3 绑定类型详解

绑定类型装饰器特点适用场景
单向绑定@State父组件->子组件单向同步组件内部状态管理
双向绑定@Link父子组件双向同步表单输入等交互场景
跨组件绑定@Provide/@Consume跨层级组件数据共享全局主题/用户信息
计算属性@Computed基于其他状态自动计算的值派生状态（如过滤列表）

5.2.4 高级绑定技巧

1. 对象属性绑定

@Observed
class User {
  name: string
  age: number
  // 必须用@Observed装饰类并实现构造方法
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

@Component
struct UserProfile {
  @State user: User = new User('Alice', 25)

  build() {
    Column() {
      Text(`Name: ${this.user.name}`)
      Slider({
        value: this.user.age,
        min: 0,
        max: 100
      }).onChange((value: number) => {
        this.user.age = value
      })
    }
  }
}

2. 数组绑定

@Entry
@Component
struct TodoList {
  @State tasks: string[] = ['Task 1', 'Task 2']

  build() {
    List() {
      ForEach(this.tasks, (item: string, index: number) => {
        ListItem() {
          Text(item)
        }
      }, (item: string) => item)
    }
  }
}

5.2.5 性能优化建议

  1. 避免深层绑定：对复杂对象使用@Observed细化监听
  2. 合理使用@Computed：缓存计算密集型结果
  3. 批量更新：对关联数据使用@State对象而非分散变量
  4. 条件渲染优化：
    // 推荐方式
if (this.showComponent) {
  CustomComponent()
}

// 不推荐（每次都会创建新组件实例）
this.showComponent ? CustomComponent() : null

5.2.6 常见问题排查

Q1：绑定数据变更但UI未更新？

  • 检查是否使用@State/@Link装饰器
  • 对象属性变更需使用新对象引用（this.obj = {...this.obj, key: newValue}）

Q2：如何实现表单双向绑定？

@Entry
@Component
struct FormExample {
  @State username: string = ''

  build() {
    Column() {
      TextInput({ text: this.username })
        .onChange((value: string) => {
          this.username = value
        })
      Text(`Current: ${this.username}`)
    }
  }
}

最佳实践：对于复杂表单，建议使用@Model装饰器实现标准化双向绑定

@Model
class FormData {
  username: string = ''
  password: string = ''
}
Last Updated::