微享互動主營:媒體廣告(朋友圈廣告,騰訊廣點通,騰訊新聞APP,新浪新聞APP,鳳凰新聞APP,優酷視頻,陌陌到店通)、重慶網站建設、重慶小程序開發、重慶公眾號制作

全國服務熱線:15320293856

二維碼

電話

汪經理:13594363214

文經理:17783139095

羅經理:15320293856

信息搜索
您當前所在的位置 首頁 > 微享資訊 > 小程序 >

用什么方法可以檢測微信小程序數據的變化

來源: 微享互動重庆网站建设      時間:2018-07-26 15:47:21  

重庆网站建设  在vue中,computed是一個計算屬性,類似于過濾器,對綁定到view的數據進行處理,并監聽變化。而watch監聽復雜數據類型需用深度監聽。這兩者都可以在vue上實現檢測數據的變化。而微信小程序不同于vue可以使用watch和computed做出相應的改變。小程序中只有函數this.setData()可以檢測數據,所以小程序每次數據改變需要檢測時都必須手動執行函數才可實現。除此之外,小程序還可以附上這兩個功能檢測數據變化。

用什么方法可以檢測微信小程序數據的變化

  vue 里是通過 Object.defineProperty 來實現數據變化檢測的,給該變量的 setter 里注入所有的綁定操作,就可以在該變量變化時帶動其它數據的變化。實際上,在小程序里實現要比 vue 里簡單,應為對于 data 里對象來說,vue 要遞歸的綁定對象里的每一個變量,使之響應式化。但是在微信小程序里,不管是對于對象還是基本類型,只能通過 this.setData() 來改變,這樣我們只需檢測 data 里面的 key 值的變化,而不用檢測 key 值里面的 key 。

重庆网站建设  這里分別調用 test2 和 test3 的值,將返回值與對應的 key 值組合成一個對象,然后再調用 setData() ,這樣就會第一次計算這兩個值,這里使用了 reduce 方法。test2 和 test3 都是依賴 test 的,這樣必須在 test 改變的時候在其的 setter 函數中調用 test2 和 test3 中對應的函數,并通過 setData 來設置這兩個變量。

  聲明了一個變量來保存所有在變化時需要執行的函數,在 set 時執行每一個函數,因為此時 this.data.test 的值還未改變,使用 setTimeout 在下一輪再執行。現在就有一個問題,怎么將函數添加到 subs 中。不知道各位還是否記得上面我們說到的在 reduce 里的那兩行代碼。因為在執行計算 test1 和 test2 第一次 computed 值的時候,會調用 test 的 getter 方法,此刻就是一個好機會將函數注入到 subs 中,在 data 上聲明一個 $target 變量,并將需要執行的函數賦值給該變量,這樣在 getter 中就可以判斷 data 上有無 target 值,從而就可以 push 進 subs,要注意的是需要馬上將 target 設為 null,

  到此為止已經實現了 watch 和 computed,但是還沒完,有個問題。當同時使用這兩者的時候,watch 里的對象的鍵也同時存在于 data 中,這樣就會重復在該變量上調用 Object.defineProperty ,后面會覆蓋前面。因為這里不像 vue 里可以決定兩者的調用順序,因此我們推薦先寫 computed 再寫 watch,這樣可以 watch computed 里的值。

本文鏈接:http://ntsanlang.cn/app-news/765.html 歡迎轉載!轉載注明出處!

來源:重慶網站建設,本文網址:http://ntsanlang.cn/app-news/765.html,歡迎分享,(電話:15320293856,微信:llhhldancing)

預約咨詢

重庆网站建设馬上提交您的需求,我們會在24小時內聯系您,提供產品策劃服務!

網址:http://ntsanlang.cn

地址:重慶市兩江新區天王星C1棟3樓

重庆网站建设網站建設咨詢:15320293856 羅經理

百度廣告咨詢:13594363214 汪經理

重庆网站建设朋友圈廣告咨詢:17783139095 文經理

微享官方微信

掃一掃 關注公眾號