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

---

看来不能太想当然，还是要多看文档再动手啊。。。