微信小程序开发——setData的使用技巧

前言：

之前使用 setData,一直都是作为给变量赋值，感觉比起vue给data中的变量的赋值还是有点麻烦的。

最近项目不太紧张，为了提高小程序的开发效率及提升小程序开发的能力，又重新的通读了下小程序的开发文档。发现 setData还有一个非必填的参数 callback——setData引起的界面更新渲染完毕后的回调函数，通过这个回调函数，可以在更新data中的数据的时候，同步在回调函数中进行相应操作，这比更新数据和后续操作分开写好多了。

Page.prototype.setData(Object data, Function callback)：

字段	类型	必填	描述	最低版本
data	Object	是	这次要改变的数据
callback	Function	否	setData引起的界面更新渲染完毕后的回调函数	1.5.0

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。关于key以数据路径的形式使用及callback回调函数的使用如下：

  data: {
    leader: {
      name: "Pony.ma",
      age: 42
    }
  },
  ...
  changeData() {
    var self=this
    self.setData({
        "leader.name": "jack.ma"
      },
      function() {
        wx.showToast({
          title: "团队leader已经更改为："+self.data.leader.name,
          icon: "none"
        })
      })
  },