微信小程序 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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
详解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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
Protoss兵种对照表
2020/03/14 星际争霸
第1次亲密接触PHP5(2)
2006/10/09 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Git命令之分支详解
2021/03/02 PHP
javascript 面向对象继承
2009/11/26 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python 实现堆排序算法代码
2012/06/05 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
用Python逐行分析文件方法
2019/01/28 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python字节单位转换实例
2019/12/05 Python
Django choices下拉列表绑定实例
2020/03/13 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
天游软件面试
2013/11/23 面试题
大队委竞选演讲稿
2014/04/28 职场文书
职务说明书范文
2014/05/07 职场文书
房屋所有权证明
2014/10/20 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript