實驗

為了證實setData的性能問題，可以寫簡單的測試例子去測試：

動態(tài)綁定1000條數(shù)據(jù)的列表進行性能測試，這里測試了三種情況：

• 最優(yōu)綁定: 在內(nèi)存中添加完畢后最后執(zhí)行setData操作。
• 最差綁定: 在添加一條記錄執(zhí)行一次setData操作。
• 最智能綁定：不管中間進行了什么操作，在運行結(jié)束時執(zhí)行一次臟檢查，對需要設置的數(shù)據(jù)進行setData操作。

參考代碼如下：

// page1.wxml
<view bindtap="worse">
  <text class="user-motto">worse數(shù)據(jù)綁定測試</text>
</view>
<view bindtap="best">
  <text class="user-motto">best數(shù)據(jù)綁定測試</text>
</view>
<view bindtap="digest">
  <text class="user-motto">digest數(shù)據(jù)綁定測試</text>
</view>

<view class="list">
  <view wx:for="{{list}}" wx:for-index="index"wx:for-item="item">
      <text>{{item.id}}</text>---<text>{{item.name}}</text>
  </view>
</view>


// page1.js
worse: function () {
   var start = +new Date();
   for (var i = 0; i < 1000; i++) {
     this.data.list.push({id: i, name: Math.random()});
     this.setData({list: this.data.list});
   }
   var end = +new Date();
   console.log(end - start);
},
best: function () {
  var start = +new Date();
  for (var i = 0; i < 1000; i++) {
    this.data.list.push({id: i, name: Math.random()});
  }
  this.setData({list: this.data.list});
  var end = +new Date();
  console.log(end - start);
},
digest: function () {
  var start = +new Date();
  for (var i = 0; i < 1000; i++) {
    this.data.list.push({id: i, name: Math.random()});
  }
  var data = this.data;
  var $data = this.$data;
  var readyToSet = {};
  for (k in data)  {
    if (!util.$isEqual(data[k], $data[k])) {
      readyToSet[k] = data[k];
      $data[k] = util.$copy(data[k], true);
    }
  }
  if (Object.keys(readyToSet).length) {
    this.setData(readyToSet);
  }
  var end = +new Date();
  console.log(end - start);
},
onLoad: function () {
  this.$data = util.$copy(this.data, true);
}

在經(jīng)過十次刷新運行測試后得出以下結(jié)果：

實現(xiàn)同樣的邏輯，性能數(shù)據(jù)卻相差40倍左右。由此可以看出，在開發(fā)過程中，一定要避免同一流程內(nèi)多次 setData 操作。