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