微信小程序 setData 对 data数据影响问题

所属分类: 网络编程 / JavaScript 阅读数: 517
收藏 0 赞 0 分享

我是纯前端的,有些时候没有后端接口,只能模拟一些数据来操作。偶然之下,发现了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数据影响问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

更多精彩内容其他人还在看

AngularJs IE Compatibility 兼容老版本IE

本文主要介绍AngularJs IE Compatibility 兼容老版本IE的问题及解决办法,有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

AngularJs Modules详解及示例代码

本文主要介绍AngularJs Modules的相关知识,这里整理了详细的资料及简单示例代码,有兴趣的朋友可以参考下
收藏 0 赞 0 分享

AngularJs Scope详解及示例代码

本文主要介绍AngularJs Scope的知识,这里整理了详细资料及示例代码,有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

node.js中module.exports与exports用法上的区别

Node.js 引入了模块(Module)概念,一个模块可以通过module.exports 或 exports 将函数、变量等导出,以使其它 JavaScript 脚本通过require() 函数引入并使用。那么node.js中module.exports与exports有什么
收藏 0 赞 0 分享

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

最近做了一个项目,其中有需求要求实现发送短信验证码后倒计时功能,其中有个难点:要求关闭页面也进行倒计时。好吧,下面小编把jquery 发送验证码倒计时的实现代码分享给大家,大家可以参考下
收藏 0 赞 0 分享

js绘制购物车抛物线动画

这篇文章主要为大家详细介绍了js绘制购物车抛物线动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

vue.js入门教程之绑定class和style样式

小编之前介绍了通过vue.js计算属性,不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式,有需要的朋友们可以参考借鉴。
收藏 0 赞 0 分享

纯JS实现可拖拽表单的简单实例

下面小编就为大家带来一篇纯JS实现可拖拽表单的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js实现StringBuffer的简单实例

下面小编就为大家带来一篇js实现StringBuffer的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多