【微信小程序】數據與界面UI不同步，不能直接操作Page.data

問題：數據層與UI不同步

微信小程序也采用UI綁定數據源的形式，根據以前做WPF的經驗，直覺上認為修改了數據層（Page.data）后，UI會自動更新，然而實驗發現數據層修改后UI層未修改，導致數據層與UI不同步的情況。

查看官方文檔Q&A，第一項就是該問題的說明，不能直接操作Page.data！需要改用Page.setData來修改數據，才能同步到UI！

另外w3cschool的教程中，對UI與數據源的綁定，Page.setData的使用也有一個很好的例子。

https://www.w3cschool.cn/weixinapp/weixinapp-page.html 直接搜setData。

示例代碼：

UI層index.wxml

<!--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

//index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

 注意其中的兩行注釋，直接操作this.data只會導致數據層與界面UI不同步！

---

看來不能太想當然，還是要多看文檔再動手啊。。。