微信小程序 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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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入门源程序
2006/10/09 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
HTML的form表单和django的form表单
2019/07/25 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
解决Python中回文数和质数的问题
2019/11/24 Python
python编写微信公众号首图思路详解
2019/12/13 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
转预备党员政审材料
2014/02/06 职场文书
学校后勤岗位职责
2014/02/19 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏