携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情
微信小程序中的setData方法主要用来对视图层的数据进行更新，在开发过程中对setData方法的调用会比较频繁，所以应该合理地调用setData方法来进行数据更新，以免引发性能问题。
setData
// js
Page({
data: {
text: ''
}
onReady: function () {
// this.data.text = 'hello world'
this.setData({
text: 'hello world'
})
},
})
// wxml
<view>{{text}}</view>
如上代码所示，在逻辑层中，我们在data中定义了需要在页面中进行展示的text字段，在onReady方法中，我们通过setData方法对text的值进行更改，然后页面上就可以看到更改后的值。需要注意，直接通过this.data.text来更改属性值，并不会触发页面渲染。
setData触发视图层渲染的大致流程是：
- 在逻辑层调用setData会触发虚拟DOM树的遍历更新
- 将data中的数据从逻辑层传到视图层
- 视图层真实DOM的更新及页面渲染
setData调用原则
1. 不要过于频繁地调用setData
每调用一次setData方法，都会触发一次虚拟DOM的改变，也可能会触发页面渲染流程，所以在调用setData方法时，可以考虑将发多次setData调用合并成一次调用，如下代码所示：
// js
Page({
onReady: function () {
// 不要频繁调用setData
this.setData({ a: 1 })
this.setData({ b: 2 })
// 绝大多数情况可以优化为
this.setData({ a: 1, b: 2 })
},
})
2. setData方法只用来更新与渲染有关的数据
因为setData方法会触发虚拟DOM更新以及页面渲染，所以与渲染无关的数据，不要使用setData方法来进行其值的改变，如下代码中，data中的b数据并不在视图中使用，所以我们可以直接使用this.data.b进行赋值，而不是是用setData方法。
// js
Page({
data: {
a: '',
b: ''
}
onReady: function () {
this.setData({
a: 1,
// b: 2
})
this.data.b = 2
},
})
<view>{{a}}</view>
当然，通过this.data.b来进行改变值其实并不是很合理，因为原则上来说，data中存放的数据应该是视图层渲染需要的数据。可以参考下面的第三种。
3. 与渲染无关的数据不要放在data中
page对象的data属性中的数据，一般都是在视图层渲染中需要展示的数据，不需要展示的数据，可以考虑放在page对象的其他字段中，如下代码中，我们需要储存下页面中所带的参数id，以供后续调用接口时使用，那么我们不用将id放在data对象中，可以将其通过this.id进行储存。
// js
Page({
data: {
a: '',
// id数据与页面渲染无关，不要放在data中
// id: ''
}
onLoad: function (options) {
const { id } = options
this.id = id
}
})
