问题：数据层与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不同步！
看来不能太想当然，还是要多看文档再动手啊。。。