合理使用 setData | 微信开放文档
1、页面
<view class="h-100px"></view>
<view>最简单的数据:</view>
<button bind:tap="handleAdd" data-type="1">点我加 1: {{text}}</button>
<view>对象的数据:</view>
<button bind:tap="handleAdd" data-type="2">点我加 1: {{params.text}}</button>
<view>数组的数据</view>
<button bind:tap="handleAdd" data-type="3">点我加 1: {{paramsArray[0].text}}</button>
<view>超复杂的数据</view>
<button bind:tap="handleAdd" data-type="4">点我加 1: {{object.list[0].obj.number[1]}}</button>
<view class="h-100px"></view>
2、js
text: 0,
params: {
text: 0
},
paramsArray: [
{
text: 0
}
],
object: {
list: [
{
obj: {
number: [0, 1]
}
}
]
}
handleAdd(e: ViewClickDataItem) {
const type = e.currentTarget.dataset.type
console.log('type', type);
switch (type) {
case '1':
this.setData({
text: this.data.text + 1
})
break;
case '2':
/**第一种写法 不推荐 */
// this.setData({
// params: {
// ...this.data.params,
// text: this.data.params.text + 1
// }
// })
/**第二种写法 */
// this.setData({
// 'params.text': this.data.params.text + 1
// })
/**第三种写法 */
const key = 'text'
this.setData({
[`params.${key}`]: this.data.params.text + 1
})
break;
case '3':
/**第一种 不推荐 */
// const newData = this.data.paramsArray
// newData[0].text = newData[0].text + 1
// this.setData({
// paramsArray: newData
// })
/**第二种写法 推荐*/
const index = 0
this.setData({
[`paramsArray[${index}].text`]: this.data.paramsArray[index].text + 1
})
break;
case '4':
/**第一种 不推荐 */
// const newData = this.data.object
// newData.list[0].obj.number[1] = newData.list[0].obj.number[1] + 1
// this.setData({
// object: newData
// })
/**第二种写法 推荐*/
const index1 = 0
const index2 = 1
this.setData({
[`object.list[${index1}].obj.number[${index2}]`]: this.data.object.list[index1].obj.number[index2] + 1
})
break;
default:
break;
}
}
ps: 上诉代码的核心就是只对其中一个变量或者一些变量进行更新操作 不会导致整个数据变动,加快数据渲染。