原生微信小程序响应式数据

原生微信小程序提供两种响应式数据处理方式

1、module:value="{{ xxx }}"
2、setData

module:value

第一种方式为简易双向绑定，这种双向绑定只能对应data中的简单数据类型，例如：string、number、boolean、null，例如：

  data: {
    keyword: '' // data中直接定义
  },

页面用module:value="{{ keyword }}"直接绑定， 这种就是简易双向绑定，数据是响应式变化。

setData

setData的赋值是响应式的，setData是一个函数式操作，它有两种赋值方式：1、直接赋值；2、表达式赋值
直接赋值

    this.setData({
      keyword: '赋值了',
    })

这是对data中的数据进行直接的赋值操作，有时候你可能会对data中某一个对象中的某个值进行赋值，那么可以用第二种表达式赋值
表达式赋值

 data: {
    info: {
      id: 1,
      name: '世界'
    }
  },

  this.setData({
      ["info.name"]: '赋值了',
      // "info.name": '赋值了'
  })

表达式赋值可以让对象中的某个值发生变化。

注意：微信小程序的setData不支持直接修改深层数组的某项，对于深层数组的修改需要直接对数组进行setData才能保持响应式。

// 修改数组中某项的数据并在页面更新
// 失败的赋值-深层数组的setData无效
this.setData({
  [formList[i][formList[i].fvEnNameToCamelCase]]: dictValue,
})
// 无效
this.setData({
  ["info[0].name"]: '赋值了', 
})

// 正确赋值-保持响应式
formList[i][formList[i].fvEnNameToCamelCase] = dictValue
this.setData({ formList })

setData的链式调用

setData实际上是一个异步的操作，有时候我们在setData后进行其它的业务逻辑操作，为了保证是在setData赋值完成后才做的逻辑操作，我们可以在setData赋值后再接函数调用，例如：

  this.setData({
      keyword: '赋值了',
  },() => {
    console.log('赋值完成后的操作')
  })