微信小程序?qū)崿F(xiàn)watch監(jiān)聽
Vue 提供了一種通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng):監(jiān)聽屬性 watch。
雖然watch的濫用會(huì)導(dǎo)致性能不佳,但在一些情況下我們還是需要watch,使得代碼更加簡(jiǎn)潔、邏輯更加清晰(其實(shí)就是嫌麻煩...)。
小程序?qū)崿F(xiàn) 類似vue 一樣的watch 監(jiān)聽數(shù)據(jù)
將方法注冊(cè)到app.js 中也可以使用高級(jí)一點(diǎn)的寫法
使用裝飾器模式將小程序page 重寫掛在到生命周期函數(shù)上或者掛在頁(yè)面this 上每次就不需要重新在調(diào)用初始化一次。本文對(duì)裝飾器模式不做介紹這是個(gè)思路。等待下次實(shí)現(xiàn)
setWatcher(page) { let data = page.data; // 獲取page 頁(yè)面data let watch = page.watch; for(let i in watch){ let key = i.split('.'); // 將watch中的屬性以'.'切分成數(shù)組 let nowData = data; // 將data賦值給nowData let lastKey = key[key.length - 1]; let watchFun = watch[i].handler || watch[i]; // 兼容帶handler和不帶handler的兩種寫法 let deep = watch[i].deep; // 若未設(shè)置deep,則為undefine this.observe(nowData, lastKey, watchFun, deep, page); // 監(jiān)聽nowData對(duì)象的lastKey } }, /\*\* \* 監(jiān)聽屬性 并執(zhí)行監(jiān)聽函數(shù) \*/ observe(obj, key, watchFun, deep, page) { let val = obj[key]; // 判斷deep是true 且 val不能為空 且 typeof val==='object'(數(shù)組內(nèi)數(shù)值變化也需要深度監(jiān)聽) if (deep && val != null && typeof val === 'object') { for(let i in val){ this.observe(val, i, watchFun, deep, page); // 遞歸調(diào)用監(jiān)聽函數(shù) } } let that = this; Object.defineProperty(obj, key, { configurable: true, enumerable: true, set: function (value) { // 用page對(duì)象調(diào)用,改變函數(shù)內(nèi)this指向,以便this.data訪問data內(nèi)的屬性值 watchFun.call(page, value, val); // value是新值,val是舊值 val = value; if (deep) { // 若是深度監(jiān)聽,重新監(jiān)聽該對(duì)象,以便監(jiān)聽其屬性。 that.observe(obj, key, watchFun, deep, page); } }, get: function () { return val; } }) }
頁(yè)面使用:
onLoad: function () { app.setWatcher(this); setTimeout(()=>{ this.setData({ name:"kangbosodoa" }) },2000) }, watch: { name: { handler(newValue,oldvalue) { console.log(this) console.log(newValue,oldvalue,"變化了"); }, deep: true }, type:{ handler(newValue) { console.log(newValue,"屬性發(fā)生變化"); }, deep: true // 是否深度監(jiān)聽 } },
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)watch監(jiān)聽的文章就介紹到這了,更多相關(guān)小程序watch監(jiān)聽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺談通過JS攔截 pushState和replaceState事件
下面小編就為大家?guī)硪黄獪\談通過JS攔截 pushState和replaceState事件。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限
在我們開發(fā)網(wǎng)頁(yè)的時(shí)候偶爾會(huì)有需要用戶錄音的情況,下面這篇文章主要給大家介紹了關(guān)于JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03JavaScript編碼風(fēng)格精選指南(編寫可維護(hù)的代碼規(guī)范)
javascript編碼規(guī)范能夠增強(qiáng)代碼的簡(jiǎn)潔性、可讀性、可擴(kuò)展性,項(xiàng)目做到后期,每修改一次,所耗費(fèi)的成本就越高,編碼規(guī)范能節(jié)省這樣的成本,并且能很好拓展升級(jí)原有系統(tǒng)功能,javascript編碼規(guī)范也是開源社區(qū)大家約定俗成的規(guī)則!2024-06-06Three.js利用Detector.js插件如何實(shí)現(xiàn)兼容性檢測(cè)詳解
這篇文章主要給大家介紹了關(guān)于Three.js利用Detector.js插件如何實(shí)現(xiàn)兼容性檢測(cè)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-09-09js實(shí)現(xiàn)按Ctrl+Enter發(fā)送效果
按Ctrl+Enter發(fā)送,思路是監(jiān)聽textarea的onkeydown事件,當(dāng)ctrl鍵被按下,并且,keycode為13(回車),時(shí),調(diào)用發(fā)送表單的函數(shù)2014-09-09實(shí)現(xiàn)高性能javascript的注意事項(xiàng)
JavaScript代碼在web應(yīng)用程序中經(jīng)常用到,但是很多開發(fā)者忽視了一些性能方面的知識(shí),如何編寫高性能javascript代碼呢?接下來,小編跟大家一起學(xué)習(xí)2019-05-05簡(jiǎn)單了解TypeScript中如何繼承 Error 類
這篇文章主要介紹了簡(jiǎn)單了解TypeScript中如何繼承 Error 類,一個(gè)典型的網(wǎng)站服務(wù)器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我們希望這些類都擁有 Error 的特性:有錯(cuò)誤消息、有調(diào)用棧、有方便打印的 toString 等。,需要的朋友可以參考下2019-06-06