【微信小程序】数据与界面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

<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'
})
}
})