微信小程序中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 相关文章推荐
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 Vue.js
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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
爬山算法简介和Python实现实例
2014/04/26 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python的keyword模块用法实例分析
2015/06/30 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python 获取url中的参数列表实例
2018/12/18 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
UDP协议功能
2013/01/06 面试题
大学专科自荐信
2014/06/17 职场文书
歌咏比赛主持词
2015/06/29 职场文书
干部培训简讯
2015/07/20 职场文书