微信小程序 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进行拖拽
Jul 20 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
vue-cli点击实现全屏功能
Mar 07 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
定义select的边框颜色
2008/04/28 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
node.js的事件机制
2017/02/08 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python检测数据类型的方法总结
2019/05/20 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python实现简单学生信息管理系统
2020/04/09 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
毕业生就业意向书
2014/04/01 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Python实现socket库网络通信套接字
2021/06/04 Python
Pytest中skip skipif跳过用例详解
2021/06/30 Python