微信小程序 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 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
js实现登录验证码
Dec 22 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 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常用的文件操作函数经典收藏
2013/04/02 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php获取远程文件内容的函数
2015/11/02 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
用ADODB.Stream转换
2007/01/22 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
python3跳出一个循环的实例操作
2020/08/18 Python
5款实用的python 工具推荐
2020/10/13 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
Java版 简易五子棋小游戏
2022/05/04 Java/Android