微信小程序中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 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
express框架下使用session的方法
Jul 31 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
1.PHP简介
2006/10/09 PHP
PHP学习之整理字符串
2011/04/17 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
php两种无限分类方法实例
2015/04/21 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
Python 专题四 文件基础知识
2017/03/20 Python
遗传算法之Python实现代码
2017/10/10 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
python3学生名片管理v2.0版
2018/11/29 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python根据多个文件名批量查找文件
2019/08/13 Python
浅谈Python 递归算法指归
2019/08/22 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
python求解汉诺塔游戏
2020/07/09 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
法学毕业生自荐信
2013/11/13 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
交通安全教育制度
2014/02/02 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
单位同意报考证明
2015/06/17 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
JS实现简单九宫格抽奖
2022/06/28 Javascript