微信小程序 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 相关文章推荐
jquery 选取方法都有哪些
May 18 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
Vue页面骨架屏注入方法
May 13 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 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 透明水印生成代码
2012/08/27 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python实现趣味图片字符化
2019/04/30 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
师范应届生求职信
2013/11/15 职场文书
学校办公室主任职责
2013/12/27 职场文书
工作分析计划书
2014/04/30 职场文书
公路绿化方案
2014/05/12 职场文书
物流管理专业求职信
2014/05/29 职场文书
股指期货心得体会
2014/09/10 职场文书
导游词范文
2015/02/13 职场文书
淮海战役观后感
2015/06/11 职场文书
毕业证明书
2015/06/19 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
日元符号 ¥
2022/02/17 杂记
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技