小程序setData函數深入分析

官方文檔可以知道

setData函數改變Page的data是同步的，會異步通知視圖層data的改變，視圖層收到通知後進行渲染。即官方文檔裏生命週期的Send Data箭頭（下圖）

callback分析

先上代碼：

Page({

  data: {
    theData: 1
  },

  onLoad: function(options) {
    console.log("data begin:" + this.data.theData);
    this.setData({
      theData: 2
    }, () => {
      console.log("callback");
    });
    console.log("data after:" + this.data.theData);
    /*長耗時*/
    for (var i = 0; i < 1000000; i++) {
      for (var j = 0; j < 2000; j++) {
        j++;
      }
    }
    console.log("data long after:" + this.data.theData);
  }

})

結果：

結論：
1、callback回調函數並不是視圖層渲染成功後的回調，而是Page的data改變完成就執行callback。
2、從long after會比callback早打印可知，setData實際上是一個異步代碼段（js單線程概念先理解好），只有for和long after打印後，console.log(“callback”);纔會執行