首页/ 填坑/ 文章详情

微信小程序setDate赋值优化

学习微信小程序,总得与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赋值不是即时行为,往往赋值后,数据进入了缓冲池,最后才一口气爆发出来。

文章评论0 records

最新 最早

0

最新评论Latest comments

big2catbig2cat 08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)