Page.prototype.setData

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

setData() 參數格式

setData(data, callback); // data需為可 JSON 化的數據，callback在 setData 對界面渲染完畢后調用

setData() 非常靈活

setData() 的第一個參數 data 是 Object 類型的數據，其中 key 可以非常靈活，可以以數據路徑的形式給出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中預先定義。
下面舉個例子來說明：

index.js

Page({
    data: {
        userInfo: {
            avatar: 'https://images.example.com/default_avatar.png'
        },
        articleList: [{title: 'init title'}]
    },
    onLoad: function () {
        let avatar = 'https://images.example.com/avatar.png';
        let newTitle = 'This is a new title';
        
        this.setData({
            'userInfo.avatar': avatar,
            'articleList[0].title': new Title
        })
    }
})

微信小程序這種給 setData 賦值的方式在原生 JavaScript 中顯然是不行的，比如：

let obj = {};
obj['person.gender'] = 'male'; // {'person.gender': 'male'}

從 obj 的結果我們可以看到兩種賦值的差異。

this.setData() 失效？

在某些情況的回調里面，直接使用 this.setData 會得到錯誤的結果，這個其實不是 setData 的問題，而是 this 指向的問題，這時候只需要提前把 this 賦值給另外一個變量，比如 that，然后使用 that.setData 就可以了，或者使用 ES6 的箭頭函數。

代碼

Page({
    data: {
        starCount: 0
    },
    onLoad: function () {
       // 錯誤的寫法
       wx.request({
           url: '/api/getStarCount',
           success: function (res) {
               this.setData({
                   starCount: res.starCount
               });
           }
       });
       
       // 正確的寫法1
       let that = this;
       wx.request({
           url: '/api/getStarCount',
           success: function (res) {
               that.setData({
                   starCount: res.starCount
               });
           }
       });
       
       // 正確的寫法2
       wx.request({
           url: '/api/getStarCount',
           success: res => {
               this.setData({
                   starCount: res.starCount
               });
           }
       });
    }
})

從代碼中可以看到，第二種寫法更加的簡潔，這也是 ES6 帶來的最大便利了，提高開發效率、減少代碼量。實際開發中使用第一種和第二種都可以，取決于團隊的開發規范和個人喜好。不過在微信小程序中，更推薦第二種寫法，代碼更少更簡潔，也沒有兼容問題，何樂而不為呢？