微信小程序 this.setData高级用法(只更改单个数据)

合理使用 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： 上诉代码的核心就是只对其中一个变量或者一些变量进行更新操作 不会导致整个数据变动，加快数据渲染。