1. Cơ chế hoạt động của cú pháp $$

Trong phát triển ứng dụng HarmonyOS Next, cú pháp $$ cung cấp cơ chế đồng bộ hai chiều mạnh mẽ giữa các biến TypeScript (TS) và trạng thái bên trong của thành phần tích hợp. Tính năng này giúp quản lý trạng thái giao diện hiệu quả, đảm bảo tính nhất quán giữa dữ liệu ứng dụng và giao diện người dùng (UI).

2. Quy tắc sử dụng

(1) Kiểu dữ liệu được hỗ trợ

• Loại dữ liệu cơ bản: Bao gồm số (number), chuỗi (string), giá trị boolean. Các loại này có thể trực tiếp đồng bộ với thuộc tính thành phần tích hợp hỗ trợ $$.
• Biến có trang trí đặc biệt:
  • @State: Quản lý trạng thái cục bộ trong component, hỗ trợ cập nhật UI khi trạng thái thay đổi.
  • @Link: Thực hiện liên kết dữ liệu hai chiều giữa các component cha/con.
  • @Prop: Truyền dữ liệu giữa các component, đảm bảo trạng thái đồng bộ theo thời gian thực.

(2) Thành phần và thuộc tính hỗ trợ

(3) Cơ chế đồng bộ

Khi sử dụng $$ để ràng buộc biến TS và thuộc tính component, bất kỳ thay đổi nào ở một phía sẽ tự động cập nhật ở phía còn lại. Ví dụ: thay đổi giá trị biến sẽ làm component hiển thị giá trị mới, và ngược lại thao tác người dùng trên component cũng cập nhật giá trị biến tương ứng.

3. Ví dụ minh họa

(1) Component InputField

@Entry
@Component
struct InputFieldDemo {
  @State inputValue: string = ''
  controller: TextController = new TextController()

  build() {
    Column({ space: 20 }) {
      Text(this.inputValue)
      InputField({ text: $$this.inputValue, placeholder: 'Nhập nội dung...', controller: this.controller })
       .placeholderColor(Color.Gray)
       .width(300)
    }
  }
}

(2) Component Toggle

@Entry
@Component
struct ToggleDemo {
  @State isActivated: boolean = false

  build() {
    Column {
      Toggle({ isOn: $$this.isActivated })
      Text(`Trạng thái: ${this.isActivated ? 'Bật' : 'Tắt'}`)
    }
  }
}

4. Lưu ý quan trọng

1. Tránh tạo mối quan hệ ràng buộc phức tạp làm giảm khả năng bảo trì. Nên thiết kế luồng dữ liệu rõ ràng, đơn giản.
2. Hiệu ứng của $$ có thể khác nhau tùy thuộc vào loại component và thuộc tính. Cần kiểm tra kỹ các trường hợp phức tạp có nhiều trạng thái.
3. Khi kết hợp với hệ thống quản lý trạng thái khác (AppStorage, LocalStorage), cần xác định rõ vai trò và thời điểm cập nhật để tránh xung đột.