老师这里有点疑问

来源:7-2 服务详情页面骨架搭建与路由传参实践

幻城163630

2021-07-26

老师看你一会用this.data.赋值,一会又用this.setData({})赋值,这两者有啥区别吗?

写回答

1回答

沁尘

2021-07-26

这个我记得在课程里有专门提到过,我不记得在哪个小节了。

this.setData 和 this.data. 都会把一个值赋值到当前页面或者组件的data 属性中,可以被当前页面或者组件中任意一个方法中访问到,这是他们的共同点。

不同点有如下几点,是需要特别注意的:

1. this.setData 是“数据绑定”操作,会触发页面重新渲染,只有被 setData 过的变量,才能够在页面中动态的渲染。而 this.data这种赋值,不会触发页面重新渲染!this.data. 这种赋值的意义在于把这个被赋值的变量当成一个页面或者组件的全局变量来使用。

2. this.setData 是异步执行的,this.data.是同步执行的。

当一个变量会在页面或者组件中多个地方被使用,但不需要被用于在页面上动态渲染的时候,就只需要 this.data. 赋值,因为即便你没有在页面使用这个变量,你做了 setData 就会触发页面更新,这是不必要的性能浪费。

反之,这个变量需要用于在页面动态渲染的时候,那就必须 setData。


0
6
沁尘
回复
慕村510262
是的。逻辑层的代码运行结果和实际渲染的结果是两回事,setData 后紧挨着立马 this.data.xxx可以获取到,不过一般在实际代码中很少会这么写,一般都会直接拿具体的变量来使用,这个没有什么特别原因。如果非要有个理由,就是 this.data.xxx这个语法太长。不过这里要警惕一个操作就是,有时候我们会在 onLoad 里面做一个数据绑定,然后立马想在 onShow 里面通过 this.data.xxx 去获取。这里的 this.data.xxx能不能获取到绑定的值是不一定的,在课程的某个小节会有这个问题的演示,到时候可以留意下。
2022-08-18
共6条回复

《慕慕到家》家政小程序组件化进阶实战-优质项目

千锤百炼的实践分享,成就你独当一面

494 学习 · 306 问题

查看课程