【微信小程序】setData的使用以及注意事項

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

setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

參數說明

字段	類型	必填	描述	最低版本
data	Object	是	這次要改變的數據
callback	Function	否	setData引起的界面更新渲染完畢后的回調函數	1.5.0

Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。

其中 key 可以以數據路徑的形式給出，支持改變數組中的某一項或對象的某個屬性，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

注意：

1. 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。
2. 僅支持設置可 JSON 化的數據。
3. 單次設置的數據不能超過1024kB，請盡量避免一次設置過多的數據。
4. 請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設置並可能遺留一些潛在問題。

示例代碼：

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

// index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data' // 不要直接修改 this.data
    // 應該使用 setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    // 或者，可以修改 this.data 之后馬上用 setData 設置一下修改了的字段
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // 對於對象或數組字段，可以直接修改一個其下的子字段，這樣做通常比修改整個對象或數組更好
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})