微信小程序 setData 对 data数据影响问题


Posted in Javascript onApril 18, 2019

我是纯前端的,有些时候没有后端接口,只能模拟一些数据来操作。偶然之下,发现了setdata 的一些机制,也有可能不对,请多指教。

先放结论:data的变量通过setdata绑在一起,是同步变化的

准备做一个一键还原界面的按钮事件,如果有后端接口,只需调一下接口,就可以了。问题是没有,于是想弄两个一模一样的数组A,B;A用来渲染界面,一键还原的时候,就把B的值赋给A,从而引起页面重新渲染,达到重置界面的效果。

结果一点反应也没有。

data里有模拟的数组  itemleft  itemright,二选一,

定义代码是这么写的

this.setData({
uniqueitem: (id == 'unfinish') ? this.data.itemleft[index] : this.data.itemright[index],

cloneitem: (id == 'unfinish') ? this.data.itemleft[index] : this.data.itemright[index],

baninput: (id == 'unfinish')?false:true
})

这是一键还原的代码

this.setData({
uniqueitem:this.data.cloneitem
})

后来通过console.log发现   uniqueitem、cloneitem和this.data.itemleft[index] 的值是一模一样的,意思是,当我改变uniqueitem的时候,其他两个都会跟着变。

然后,我把cloneitem的值通过缓存还获取,代码变成了这样

this.setData({
uniqueitem: (id == 'unfinish') ? this.data.itemleft[index] : this.data.itemright[index],

baninput: (id == 'unfinish')?false:true
})
var that=this
wx.getStorage({

key: 'item',

success: function(res) {


console.log(res)


that.setData({



cloneitem:res.data


})

},
})
this.setData({

uniqueitem:this.data.cloneitem
})

改成这样之后,一键还原第一次正常,后面再点全不正常

这是测试的console顺序

console.log(this.data.itemleft[0])
console.log(this.data.uniqueitem)
console.log(this.data.cloneitem)

事先说明,改变date,改的是2的date

我通过一个函数改变了date,加1,

可以看到 1和2同时改变,3不变;

一键还原第一次

可以看到,1不变,3的值赋给了2;到目前正常

再次改变date,

可以看到,2和3一起变,1不变了

一键还原

和上面一样不变了

后来我改成

var aaa = this.data.cloneitem;
this.setData({
uniqueitem:aaa
})

效果和上面一样。

结论,

当data有3个变量,a和b、c

this.setData({
a:this.data.b

c:this.data.b
})

意思是,a和b绑一起,c和b绑一起,3个一起变,改变一个等于改变3个。个人猜测,应该是存放变量a,b,c 的地址变成一个了。

this.setData({
a:this.data.b
})

a和b一起变。

this.setData({
a:this.data.c
})

a不和b一起变,和c一起变。

简而言之,data的变量通过setdata绑在一起,是同步变化的,要小心。

总结

以上所述是小编给大家介绍的微信小程序 setData 对 data数据影响问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 #Javascript
vue.js高德地图实现热点图代码实例
Apr 18 #Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 #Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 #Javascript
详解Vue中的scoped及穿透方法
Apr 18 #Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 #Javascript
Vue 进阶之路(三)
Apr 18 #Javascript
You might like
PHP设计模式之迭代器模式
2016/06/17 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
详解Puppeteer 入门教程
2018/05/09 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python中异常重试的解决方案详解
2017/05/05 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python和js交互调用的方法
2020/06/23 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
校运会通讯稿
2015/07/18 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Python基础之变量的相关知识总结
2021/06/23 Python
Redis keys命令的具体使用
2022/06/05 Redis