详解setData

关于setData，文档的描述是该函数用于将数据从逻辑层发宋到视图层(异步)，同时改变对应的 this.data的值(同步)

• 所以，我们要想改变data里的属性的值的话，必须要通过this.setData，否则如果我们只是通过this.data的方式去修改data里的属性的值的话，是不会同步到界面上的；
  我们可以通过例子来理解一下上边说的同步和异步的意思

    console.log('setData 一开始的值：'+this.data.testData)
    this.setData({
      testData:1
    },()=>{
      console.log('回调执行')
    })
    console.log('setData 设置后的值：'+this.data.testData)

    for(let i=0;i<10000;i++){
      for(let j=0;j<10000;j++){

      }
    }
    console.log('setData 长耗时后的值：'+this.data.testData)

image.png

如果通过setData去改变对象里某个属性的值

data:{
      testObj:{
        name:'lilei',
        age:32
      }
}

// 要改变对象里某个属性的值，要放在中括号里，并且用引号
 changeAge(){
    this.setData({
      ['testObj.age']:33
    })
  },

• 如果我们没有事先在data里去声明某个对象的属性，那么通过setData去给这个对象去设置一个新属性的值，也是可以显示到页面上的，只不过一般建议要先在data里声明好再去setData；(不仅仅是对象的属性，如果只是一个一般的属性，比如xx我们没有在data里声明，但是通过setData设置了，就可以显示到页面上)

 changeAge(){
    this.setData({
      ['testObj.age']:33,
      ['testObj.city']:'杭州',   // testObj在data里并没有city这个属性，但是通过setData设置后，也可以显示在页面上
      xx:'任意值'
    })
  },

setData的性能方面

• 避免setData的数据过大，因为setData在设置值的时候，是有大小限制的。最大的设置值不能超过1M(1024kb),每次setData都要把数据从逻辑层传送到视图层，数据过大会增加它们之间的通信时间。
• 避免频繁调用setData，过于频繁调用setData会造成卡顿
• 避免将未绑定在WXML的变量传入setData,因为未绑定在WXML的变量跟渲染界面是无关的。这样做可以减少不必要的性能消耗。