微信小程序setDate赋值优化

微信小程序 setData 赋值优化卡顿发布于 2021-09-14

学习微信小程序，总得与setData打交道。只有setData赋值过后，视图层才会产生变化，不然数据只停留在逻辑层。有基础的同学，阅读微信小程序文档很快，可以做到一天从入门到精通。在不知情的情况下，半只脚已经陷入setData的坑里。

编程时，对setData随时随地能够赋值大为满意，养成随手赋值的习惯。在学习的demo里，这种方法即好教学，又能表现足够的流畅。恰恰是这样，这种方法延续使用到繁杂的页面，页面出现了卡顿现象，悔之晚已。

JS//错误版赋值
this.setData({'name': '小明'})
this.setData({'sex': '男'})
this.setData({'age': '4'})

//正确版赋值
let object = {
    'name': '小明'
    ,'sex': '男'
   ,'age': '4'
}

this.setData(object );

事后了解到setData赋值的参数是个对象，充许同时对多个值赋值。所以将所有的要赋值的数据整合到一个对象里，最后只做一次setData赋值。

在渲染二维数组列表时，往往赋值图个方便，直接对二维组数据直接赋值，导致视频页面数据全部刷新。

JSlet index = 1;
let user = this.data.user;

user[index] = {
    'name': '小明'
    ,'sex': '男'
   ,'age': '4'
}

this.setData({'user': user}); //全局刷新视图页面

let key = 'user['+index+']';
this.setData({[key]: user[index]]}); //局部刷新视图页面

别小看这个小小的改动，小程序页面流畅提升一个档次。特别是无限下拉加载数据，随时数据越来越多，运算也随之增加，可降低页面卡顿成度。

微信小程序文档指出，setData短时间内，不能频繁赋值。这意味着，实时监听某个事件，实时改变某个值变成了不可能。比如：实时监听滚动条。连续赋值会导致值一直没发生变化，直到滚动停下来，赋值的数字像抽了疯，一直在跳动改变。证明setData赋值不是即时行为，往往赋值后，数据进入了缓冲池，最后才一口气爆发出来。