Page.prototype.setData

setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時(shí)改變對(duì)應(yīng)的 this.data 的值（同步）。

setData() 參數(shù)格式

setData(data, callback); // data需為可 JSON 化的數(shù)據(jù)，callback在 setData 對(duì)界面渲染完畢后調(diào)用

setData() 非常靈活

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

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 的結(jié)果我們可以看到兩種賦值的差異。

this.setData() 失效？

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

代碼

Page({
    data: {
        starCount: 0
    },
    onLoad: function () {
       // 錯(cuò)誤的寫法
       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 帶來的最大便利了，提高開發(fā)效率、減少代碼量。實(shí)際開發(fā)中使用第一種和第二種都可以，取決于團(tuán)隊(duì)的開發(fā)規(guī)范和個(gè)人喜好。不過在微信小程序中，更推薦第二種寫法，代碼更少更簡潔，也沒有兼容問題，何樂而不為呢？