微信小程序 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 相关文章推荐
Jquery 表格合并的问题分享
Sep 17 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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比较多维数组中值的大小排序实现代码
2012/09/08 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
python3中bytes和string之间的互相转换
2017/02/09 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python是否适合网页编程详解
2019/10/04 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
时尚休闲吧创业计划书
2014/01/25 职场文书
教师节促销活动方案
2014/02/14 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis