小程序怎么通過watch和computed檢測數(shù)據(jù)-創(chuàng)新互聯(lián)

小編給大家分享一下小程序怎么通過watch和computed檢測數(shù)據(jù)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

站在用戶的角度思考問題，與客戶深入溝通，找到瀘州網(wǎng)站設(shè)計與瀘州網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋瀘州地區(qū)。

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

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

測試代碼：

Page({
data: {
test: { a: 123 },
test1: \'test1\',
},
onLoad() {
computed(this, {
test2: function() {
returnthis.data.test.a + \'2222222\'
},
test3: function() {
returnthis.data.test.a + \'3333333\'
}
})
watch(this, {
test:function(newVal) {
console.log(\'invoke watch\')
this.setData({test1: newVal.a + \'11111111\' })
}
})
},
changeTest() {
this.setData({ test:{ a: Math.random().toFixed(5) } })
},
})

現(xiàn)在我們要實(shí)現(xiàn) watch 和 computed 方法，使得 test 變化時，test1、test2、test3 也變化，為此，增加了一個按鈕，當(dāng)點(diǎn)擊這個按鈕時，test 會改變。

watch 方法相對簡單點(diǎn)，首先我們定義一個函數(shù)來檢測變化：

function defineReactive(data, key, val, fn) {
Object.defineProperty(data, key, {
configurable: true,
enumerable: true,
get: function() {
return val
},
set: function(newVal){
if (newVal === val)return
fn &&fn(newVal)
val = newVal
},
})
}

然后遍歷 watch 函數(shù)傳入的對象，給每個鍵調(diào)用該方法

function watch(ctx, obj) {
Object.keys(obj).forEach(key => {
defineReactive(ctx.data, key, ctx.data[key], function(value) {
obj[key].call(ctx,value)
})
})
}

這里有參數(shù)是 fn ，即上面 watch 方法里 test 的值，這里把該方法包一層，綁定 context。

接著來看 computed，這個稍微復(fù)雜，因?yàn)槲覀儫o法得知 computed 里依賴的是 data 里面的哪個變量，因此只能遍歷 data 里的每一個變量。

function computed(ctx, obj) {
let keys =Object.keys(obj)
let dataKeys =Object.keys(ctx.data)
dataKeys.forEach(dataKey => {
defineReactive(ctx.data, dataKey, ctx.data[dataKey])
})
let firstComputedObj =keys.reduce((prev, next) => {
ctx.data.$target =function() {
ctx.setData({[next]: obj[next].call(ctx) })
}
prev[next] =obj[next].call(ctx)
ctx.data.$target =null return prev
}, {})
ctx.setData(firstComputedObj)
}

詳細(xì)解釋下這段代碼，首先給 data 里的每個屬性調(diào)用 defineReactive 方法。接著計算 computed 里面每個屬性第一次的值，也就是上例中的 test2、test3。

computed(this, {
test2: function() {
returnthis.data.test.a + \'2222222\'
},
test3: function() {
returnthis.data.test.a + \'3333333\'
}
})

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

小程序商店提供更多上線小程序

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

到此為止已經(jīng)實(shí)現(xiàn)了 watch 和 computed，但是還沒完，有個問題。當(dāng)同時使用這兩者的時候，watch 里的對象的鍵也同時存在于 data 中，這樣就會重復(fù)在該變量上調(diào)用 Object.defineProperty ，后面會覆蓋前面。因?yàn)檫@里不像 vue 里可以決定兩者的調(diào)用順序，因此我們推薦先寫 computed 再寫 watch，這樣可以 watch computed 里的值。

以上是“小程序怎么通過watch和computed檢測數(shù)據(jù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：小程序怎么通過watch和computed檢測數(shù)據(jù)-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://muchs.cn/article20/dpheco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、App設(shè)計、軟件開發(fā)、網(wǎng)站營銷、商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)