微信小程序 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 原型继承
Dec 26 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
jquery实现动态画圆
Dec 04 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
给初学PHP的5个入手程序
2006/11/23 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
Symfony查询方法实例小结
2017/06/28 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
javascript版2048小游戏
2015/03/18 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
js实现图片360度旋转
2017/01/22 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
django输出html内容的实例
2018/05/27 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
逻辑链路控制协议
2016/10/01 面试题
高中三年学习生活的自我评价
2013/10/10 职场文书
物流业务员岗位职责
2014/02/08 职场文书
市场营销方案范文
2014/03/11 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
挂靠协议书
2015/01/27 职场文书
python tqdm用法及实例详解
2021/06/16 Python