微信小程序 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 设计模式之组合模式解析
Apr 09 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
JavaScript onclick事件使用方法详解
May 15 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 UTF8编码内的繁简转换类
2009/07/20 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python实现简单socket通信的方法
2016/04/19 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
疾病防治方案
2014/05/31 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
《分数的意义》教学反思
2016/02/20 职场文书