微信小程序 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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
js仿京东放大镜效果
Aug 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实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Python判断某个用户对某个文件的权限
2016/10/13 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python for循环与range函数的使用详解
2019/03/23 Python
python 魔法函数实例及解析
2019/09/25 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
会务接待方案
2014/02/27 职场文书
师恩难忘教学反思
2014/04/27 职场文书
创先争优个人总结
2015/03/04 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
小学六一主持词开场白
2015/05/28 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python