一、什么是双向绑定

双向绑定，顾名思义，就是数据的绑定不仅可以从逻辑模型到界面展示，还可以从用户交互的界面反馈回来，自动更新逻辑模型的数据。传统的数据绑定，仅限于数据的单向流动。

二、小程序实现双向绑定的原理

小程序实现双向绑定，需要借助微信的框架提供的双向数据绑定原理。我们可以将数据模型与程序界面进行绑定，当数据改变时，view 层的渲染会自动更新；当 view 层发生变化时，数据模型的数据也会自动更新。这种实现方法可以极大地提升代码阅读性和开发效率。下面是一个示例代码：

<view>
  <input value="{{text}}" bindinput="onInput"/> 
  <text>
   {{text}}
  </text>
</view>

上面代码中，双花括号里面的“text”变量是双向数据绑定的核心，input 绑定了一个 onInput 方法，在方法内部处理了双向数据绑定。当使用者修改 input 的时候，onInput 方法会自动将 input 数据更新到“text”变量中，同时，“text”也会自动更新到 view 层，因为 input 绑定了“value”属性，即双向数据绑定的核心。

三、使用computed和watch监听数据

computed 和 watch 是小程序中非常常用的两个 API，可以非常方便地监听数据的变化。

computed

computed 在小程序中被称为计算属性，通常用于处理一些需要计算的数据。例如，我们需要在逐步输入价格和地区时计算运费，这个运费就可以作为计算属性进行处理。下面是使用计算属性的示例代码：

Page({
  data: {
    price: 0,
    region: ['广东省', '广州市', '海珠区'],
  },
  computed: {
    total(){
      let price = this.data.price
      let region = this.data.region
      let freight = price * 0.05
      if(region[0] == '广东省' && region[1] == '广州市'){
        freight += 10
      }
      return freight.toFixed(2)
    }
  },
})

上面代码中的“total”就是我们计算出来的结果，它依赖于 price 和 region 两组数据，在 price 或 region 任一发生变化时都会自动重新计算，因为在最后的使用端（如wxml界面中）它被当做一个变量来使用。

watch

watch 在小程序中被称为数据监听函数，通常用于监听某个数据的变化，当数据发生改变时，就会自动执行特定的代码。下面是使用 watch 的示例代码：

Page({
  data: {
    price: 0,
    region: ['广东省', '广州市', '海珠区'],
  },
  watch:{
    'price': function(newVal,oldVal){
      console.log('新的价格是：', newVal)
    },
    'region': function(newVal,oldVal){
      console.log('新的地区是：', newVal)
    },
  },
})

上面代码中演示了 price 和 region 两个数据的监听，每当它们的值发生变化时，监听函数就会被触发。在监听函数中，可以实现任何自定义的功能，比如将价格值保存到本地缓存中。

四、监听组件事件

在小程序中，我们可以通过监听组件事件，实现数据的双向绑定。下面是一个实现双向绑定的示例代码：

<view>
  <input value="{{title}}" name="title" type="text" bindinput="onInput"/>
  <input value="{{content}}" name="content" type="text" bindinput="onInput"/>
</view>

上面代码中，我们定义了两个 input 组件，分别绑定了 title 和 content 两个变量。绑定方式通过在双花括号内部使用变量名实现。在 input 继承中，我们加入了一个双向绑定属性“bind-input”，当用户输入内容时，自动将输入数据更新到对应的组件上。这样，当我们在修改 title 和 content 数据时，组件中对应的数据也会发生变化，如下代码所示：

Page({
  data: {
    title: 'input1',
    content: 'input2'
  },
  onInput: function(e){
    const pair = {}
    pair[e.target.name] = e.detail.value
    this.setData(pair)
  }
})

上面代码中的 onInput 方法负责监听 bindinput 事件，当事件发生时，会更新对应的数据模型，从而实现数据的双向绑定。

五、总结

以上就是小程序实现数据双向绑定的主要技巧，包括使用双向数据绑定原理、computed和watch监听数据、监听组件事件等。实现数据双向绑定不仅可以提高代码的可读性和可维护性，还可以提高开发效率。

使用小程序实现数据双向绑定的技巧