微信小程序 setData 對(duì) data數(shù)據(jù)影響問(wèn)題
我是純前端的,有些時(shí)候沒(méi)有后端接口,只能模擬一些數(shù)據(jù)來(lái)操作。偶然之下,發(fā)現(xiàn)了setdata 的一些機(jī)制,也有可能不對(duì),請(qǐng)多指教。
先放結(jié)論:data的變量通過(guò)setdata綁在一起,是同步變化的
準(zhǔn)備做一個(gè)一鍵還原界面的按鈕事件,如果有后端接口,只需調(diào)一下接口,就可以了。問(wèn)題是沒(méi)有,于是想弄兩個(gè)一模一樣的數(shù)組A,B;A用來(lái)渲染界面,一鍵還原的時(shí)候,就把B的值賦給A,從而引起頁(yè)面重新渲染,達(dá)到重置界面的效果。
結(jié)果一點(diǎn)反應(yīng)也沒(méi)有。
data里有模擬的數(shù)組 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 })
后來(lái)通過(guò)console.log發(fā)現(xiàn) uniqueitem、cloneitem和this.data.itemleft[index] 的值是一模一樣的,意思是,當(dāng)我改變uniqueitem的時(shí)候,其他兩個(gè)都會(huì)跟著變。
然后,我把cloneitem的值通過(guò)緩存還獲取,代碼變成了這樣
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 })
改成這樣之后,一鍵還原第一次正常,后面再點(diǎn)全不正常
這是測(cè)試的console順序
console.log(this.data.itemleft[0]) console.log(this.data.uniqueitem) console.log(this.data.cloneitem)
事先說(shuō)明,改變date,改的是2的date
我通過(guò)一個(gè)函數(shù)改變了date,加1,
可以看到 1和2同時(shí)改變,3不變;
一鍵還原第一次
可以看到,1不變,3的值賦給了2;到目前正常
再次改變date,
可以看到,2和3一起變,1不變了
一鍵還原
和上面一樣不變了
后來(lái)我改成
var aaa = this.data.cloneitem; this.setData({ uniqueitem:aaa })
效果和上面一樣。
結(jié)論,
當(dāng)data有3個(gè)變量,a和b、c
this.setData({ a:this.data.b c:this.data.b })
意思是,a和b綁一起,c和b綁一起,3個(gè)一起變,改變一個(gè)等于改變3個(gè)。個(gè)人猜測(cè),應(yīng)該是存放變量a,b,c 的地址變成一個(gè)了。
this.setData({ a:this.data.b })
a和b一起變。
this.setData({ a:this.data.c })
a不和b一起變,和c一起變。
簡(jiǎn)而言之,data的變量通過(guò)setdata綁在一起,是同步變化的,要小心。
總結(jié)
以上所述是小編給大家介紹的微信小程序 setData 對(duì) data數(shù)據(jù)影響問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
一個(gè)最簡(jiǎn)單的級(jí)聯(lián)下拉菜單
一個(gè)最簡(jiǎn)單的級(jí)聯(lián)下拉菜單...2006-12-12JS實(shí)現(xiàn)簡(jiǎn)單獲取最近7天和最近3天日期的方法
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單獲取最近7天和最近3天日期的方法,涉及javascript針對(duì)日期與時(shí)間的相關(guān)數(shù)值運(yùn)算與轉(zhuǎn)換操作技巧,需要的朋友可以參考下2018-04-04Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問(wèn)題解決
本文主要介紹了Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06微信小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能的相關(guān)資料,包括頁(yè)面跳轉(zhuǎn)的方式、跳轉(zhuǎn)傳參的方法以及頁(yè)面返回的操作,通過(guò)簡(jiǎn)單的代碼示例,幫助讀者快速掌握微信小程序頁(yè)面跳轉(zhuǎn)的基本用法,下面需要的朋友可以參考下2023-03-03使用phantomjs進(jìn)行網(wǎng)頁(yè)抓取的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用phantomjs進(jìn)行網(wǎng)頁(yè)抓取的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09JavaScript中的Primitive對(duì)象封裝介紹
這篇文章主要介紹了JavaScript中的Primitive對(duì)象封裝介紹,本文著重講解封裝過(guò)程,然后給出示例代碼,需要的朋友可以參考下2014-12-12