harmony OS NEXT-双向数据绑定MVVM以及$$语法糖介绍

# 鸿蒙Harmony-双向数据绑定MVVM以及$$语法糖介绍

## 1.1 双向数据绑定概念

在鸿蒙（HarmonyOS）应用开发中，双向数据改变（或双向数据绑定）是一种让数据·模型和UI组件之间保持同步的机制，当数据发生变化时，UI自动更新;反之，当用于通过UI代码操作修改数据时，数据模型也会同步更新，这种机制简化了开发，减少了手动DOM或UI组件的代码量，举个简单的例子，比如输入框和变量的绑定，用户输入变量更新，变量在其他地方修改时输入框的内容也发生变化

## 1.2双向数据绑定步骤

1. @State装饰器修饰数据
2. 通过@onchange事件去收集改变的值，并将新值赋值给原来变量，达到数据改变


## 1.3案例演示

* 代码演示

```ts
@Entry
@Component
struct Test1 {
 @State userName: string = '小程神'

 build() {
   Column({ space: 20 }) {
     Text('通过onChange收集inputValue')
     TextInput()
       .border({
         color: Color.Black,
         width: 1
       })
       .onChange((value) => {
         this.userName = value

       })
     Text('展示inputvalue')
     TextInput({ text: this.userName })
       .border({
         width: 1,
         color: Color.Black
       })
   }.height('100%')
   .width('100%')
   .padding(20)
 }
}
```

* 效果展示


* 总结
 1. 数据发生变化 绑定text的值 –>视图产生更新
 2. 视图产生事件  onChange事件  –>数据发生变化

## 1.4MVVM：$$语法糖

> 通过上述的onChange事件改变数据，其实还有更为简便的一种方式可以实现双向数据绑定

官方文档上提供了以下组件实现双向数据绑定的快捷方法


### 1.4.1案例演示

1. textInput演示

* 代码展示

```ts
@Entry
@Component
struct Test2 {
 @State message: string = 'Hello World';

 build() {
   Column({ space: 10 }) {
     Text(this.message)
     TextInput({ text: $$this.message })
     Button('改变数据')
       .onClick(() => {
         this.message = '我的小猫暴脾气'
       })

   }.width('100%')
   .height('100%')
   .padding(20)
 }
}
```

* 效果展示


2. checkBox展示

* 代码展示

```ts
   Text(this.ischecked+'')
     Checkbox()
       .select($$this.ischecked)
```

* 效果展示


3. Toggle展示

* 代码展示

```
     Text(this.isOn + '')
     Toggle({
       type: ToggleType.Switch,
       isOn: $$this.isOn
     })
```

* 案例演示


4. 时间选择器展示

* 代码展示

```ts
    Text(this.date.toDateString())
     DatePicker({
       selected:$$this.date
     })
```

* 效果演示


5.Select展示

* 代码展示

```ts
  Text('mySelect' + this.select)
     Select([
       { value: 'vip' },
       { value: '绿钻' },
       { value: '黄钻' }
     ])
       .value($$this.select)

```

 

审核编辑 黄宇