this.setData({})用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。用this.data而不用this.setData({})会造成页面内容不更新的问题。
例如下面的代码addPerson:函数中，如果写成this.data.name = '保存'，那么点击'新增参保人'，按钮的名称是不会更改成"保存"的。因为微信框架里面说了用this.data的形式，数据会变，但是视图并不会变。也就是说，其实'新增参保人'已经变成了'保存'，只是视图没更新而已。用this.setData({})的形式不仅会改变数据，而且还会改变视图。
还有非常重要的一点，如果页面需要显示动态的数据的话,那么我们必须要把数据更新到data中对应的变量中。例1：更新array数组中第0个元素msg这个key对应的value。``例2：更新name的值。msg和name都在data中，都是变量。
全部代码如下
index.js
Page({
data: {
text: 'init data',
array: [{ msg: '马大哈，大马哈' }, { msg: '风格迥异' }],
name: '新增参保人',// name的默认值
},
addPerson:function(event){
// this.data.name = '保存'
this.setData({
name:'保存'
})
},
modifyArray:function(event){
this.setData({
'array[0].msg':'新值'
})
}
})
index.wxml
<view class='topText'>{{text}}</view>
<view class='midText' bindtap="modifyArray">{{array[0].msg}}</view>
<view class='footerBtn' bindtap="addPerson">{{name}}</view>
index.wxss
.topText{
position: fixed;
top: 50rpx;
left: 0;
width: 100%;
height: 300rpx;
background: #e91010;
color: #fff;
font-size: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.midText{
position: fixed;
top: 500rpx;
left: 0;
width: 100%;
height: 80rpx;
background: #10e934;
color: rgb(0, 0, 0);
font-size: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.footerBtn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 110rpx;
background: #108ee9;
color: #fff;
font-size: 32rpx;
display: flex;
align-items: center;
justify-content: center;
}
默认状态
image.png
点击底部'新增参保人'按钮之后，按钮名称变为“保存”
image.png
点击'马大哈，大马哈'按钮之后，按钮名称变为“新值”
image.png
