微信小程序中this.data与this.setData的区别详解


Posted in Javascript onSeptember 17, 2018

一、摘要

小程序中我们会经常使用到this.data与this.setData。其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的。那么他们之间的区别与联系你真的搞懂了吗?

Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。

注意:

  • 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
  • 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

二、正文

this.data可以获取页面data对象,但是它返回的对象到底是新的对象还是仅仅只是一个引用呐。这个很关键,在日常开发中很可能因为不知道或者是自己的疏忽导致bug,而且很难排查原因。带着这个疑问我们来做一下试验。由于时间比较紧,博主就不单独写demo了,项目中可能有大量其它代码干扰我们分析,还请见谅。

var data = this.data.swiperItems[currentSwiper];

这行代码使用this.data获取了我需要的对象,并且赋值给data变量,下面分别打印data和this.data的相应对象。

微信小程序中this.data与this.setData的区别详解

可以看到这两个对象的内容是一致的。下面我将在data变量中添加一个test字段,然后再看这两者的打印结果。注意我并不会对this.data操作。

微信小程序中this.data与this.setData的区别详解

可以看到他们都发生了变换,所以这是浅拷贝,也就是两个变量指向了同一片存储区域,无论通过哪个变量操作这片存储区域,相应的两个变量得出的值都会变换。为了继续证明我们的猜想是正确的,下面我只操作this.data而不操作data。

微信小程序中this.data与this.setData的区别详解

跟我们预想的一样,即使我先赋值后加字段,data得出的结果也是被修改了的。

可能有人会问,那为啥用使用this.setData后才能看到界面的变换呢?至于this.setData我们可以看成是更新界面,并且貌似this.setData里面又托管了一个this.data的副本。因为在我改变this.data后立马去执行

this.setData({});

界面并不会更新,这就说明我们需要更新this.setData管理的那个数据对象才能更新界面,而界面真正加载的数据也是来自那里。想要知道具体怎么实现的,那就要去看源代码了。

三、结论

总结一下就是:this.data与this.setData的关系就是this.setData里面存储的是this.data的副本,而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面,因为这个时候的this.setData里面的副本还是没有更新前的。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
jquery maxlength使用说明
Sep 09 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
Puppet的一些技巧
Sep 17 #Javascript
详解JavaScript添加给定的标签选项
Sep 17 #Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 #Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 #Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 #Javascript
分享5个好用的javascript文件上传插件
Sep 16 #Javascript
vuex直接赋值的三种方法总结
Sep 16 #Javascript
You might like
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
js post提交调用方法
2014/02/12 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python 编程之twisted详解及简单实例
2017/01/28 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
如何基于python实现脚本加密
2019/12/28 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
pycharm安装及如何导入numpy
2020/04/03 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
小加工厂管理制度
2014/01/21 职场文书
数学系个人求职信范文
2014/01/30 职场文书
《学会合作》教学反思
2014/04/12 职场文书
社区志愿者活动方案
2014/08/18 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
高温慰问简报
2015/07/21 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
Redis Cluster集群动态扩容的实现
2021/07/15 Redis