微信小程序 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打印纸函数代码(递归)
Jun 18 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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
Yii中表单用法实例详解
2016/01/05 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP7 新增功能
2021/03/09 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
javascript实现简单页面倒计时
2021/03/02 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python交互环境下实现输入代码
2018/06/22 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python tkinter常用操作代码实例
2020/01/03 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
文化与传播毕业生求职信
2014/03/09 职场文书
英语课外活动总结
2014/08/27 职场文书
五五普法心得体会
2014/09/04 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
Python如何导出导入所有依赖包详解
2021/06/08 Python