微信小程序面试题 之 setData详解

一、setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）

个人理解： 因为小程序 逻辑层 与 渲染层 是并行的，所以当数据改变时，逻辑层的this.data已经改变了，但是渲染层页面的展示还没有变，因为是异步操作

测试代码

Page({

    data: {
        testData: 0
    },
    
    onLoad() {
        console.log('start', this.data.testData)
    
        this.setData({
            testData: 1
        }, ()={
            console.log('回调执行')
        })
        
        console.log('end', this.data.testData)
        
        //模拟js长耗时操作
        for(let i=0; i<1000000000000000000000000; i++) {}
        
        console.log('长耗时', this.data.testData)
    }

})

打印结果

start 0
end 1
长耗时 1
回调执行

二、改变data中对象的某个属性值

Page({
  data: {
    array: [{text: 'init data'}],
    object: {
      name: '名字',
      age: 1
      
    }
  },
  
   onLoad(){
       // × 错误: name属性会被覆盖掉
       this.setData({
          object: {
              age: 2
          }
        })
       
       //正确
       this.setData({
          'array[0].text':'changed data',
          'object.age': 2
        })
   }
  
})