在開(kāi)發(fā) vue 的時(shí)候,我們可以使用 watch 和 computed 很方便的檢測(cè)數(shù)據(jù)的變化,從而做出相應(yīng)的改變,但是在小程序里,只能在數(shù)據(jù)改變時(shí)手動(dòng)觸發(fā) this.setData(),那么如何給小程序也加上這兩個(gè)功能呢?
我們知道在 vue 里是通過(guò) Object.defineProperty 來(lái)實(shí)現(xiàn)數(shù)據(jù)變化檢測(cè)的,給該變量的 setter 里注入所有的綁定操作,就可以在該變量變化時(shí)帶動(dòng)其它數(shù)據(jù)的變化。那么是不是可以把這種方法運(yùn)用在小程序上呢?
實(shí)際上,在小程序里實(shí)現(xiàn)要比 vue 里簡(jiǎn)單,應(yīng)為對(duì)于 data 里對(duì)象來(lái)說(shuō),vue 要遞歸的綁定對(duì)象里的每一個(gè)變量,使之響應(yīng)式化。但是在微信小程序里,不管是對(duì)于對(duì)象還是基本類型,只能通過(guò) this.setData() 來(lái)改變,這樣我們只需檢測(cè) data 里面的 key 值的變化,而不用檢測(cè) key 值里面的 key 。
先上測(cè)試代碼
<view>{{ test.a }}</view> <view>{{ test1 }}</view> <view>{{ test2 }}</view> <view>{{ test3 }}</view> <button bindtap="changeTest">change</button>
const { watch, computed } = require('./vuefy.js') Page({ data: { test: { a: 123 }, test1: 'test1', }, onLoad() { computed(this, { test2: function() { return this.data.test.a + '2222222' }, test3: function() { return this.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 變化時(shí),test1、test2、test3 也變化,為此,我們?cè)黾恿艘粋€(gè)按鈕,當(dāng)點(diǎn)擊這個(gè)按鈕時(shí),test 會(huì)改變。
watch 方法相對(duì)簡(jiǎn)單點(diǎn),首先我們定義一個(gè)函數(shù)來(lái)檢測(cè)變化:
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ù)傳入的對(duì)象,給每個(gè)鍵調(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。
接著來(lái)看 computed,這個(gè)稍微復(fù)雜,因?yàn)槲覀儫o(wú)法得知 computed 里依賴的是 data 里面的哪個(gè)變量,因此只能遍歷 data 里的每一個(gè)變量。
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 里的每個(gè)屬性調(diào)用 defineReactive 方法。接著計(jì)算 computed 里面每個(gè)屬性第一次的值,也就是上例中的 test2、test3。
computed(this, { test2: function() { return this.data.test.a + '2222222' }, test3: function() { return this.data.test.a + '3333333' } })
這里分別調(diào)用 test2 和 test3 的值,將返回值與對(duì)應(yīng)的 key 值組合成一個(gè)對(duì)象,然后再調(diào)用 setData() ,這樣就會(huì)第一次計(jì)算這兩個(gè)值,這里使用了 reduce 方法。但是你可能會(huì)發(fā)現(xiàn)其中這兩行代碼,它們好像都沒(méi)有被提到是干嘛用的。
ctx.data.$target = function() { ctx.setData({ [next]: obj[next].call(ctx) }) } ctx.data.$target = null
可以看到,test2 和 test3 都是依賴 test 的,這樣必須在 test 改變的時(shí)候在其的 setter 函數(shù)中調(diào)用 test2 和 test3 中對(duì)應(yīng)的函數(shù),并通過(guò) setData 來(lái)設(shè)置這兩個(gè)變量。為此,需要將 defineReactive 改動(dòng)一下。
function defineReactive(data, key, val, fn) { let subs = [] // 新增 Object.defineProperty(data, key, { configurable: true, enumerable: true, get: function() { // 新增 if (data.$target) { subs.push(data.$target) } return val }, set: function(newVal) { if (newVal === val) return fn && fn(newVal) // 新增 if (subs.length) { // 用 setTimeout 因?yàn)榇藭r(shí) this.data 還沒(méi)更新 setTimeout(() => { subs.forEach(sub => sub()) }, 0) } val = newVal }, }) }
相較于之前,增加了幾行代碼,我們聲明了一個(gè)變量來(lái)保存所有在變化時(shí)需要執(zhí)行的函數(shù),在 set 時(shí)執(zhí)行每一個(gè)函數(shù),因?yàn)榇藭r(shí) this.data.test 的值還未改變,使用 setTimeout 在下一輪再執(zhí)行?,F(xiàn)在就有一個(gè)問(wèn)題,怎么將函數(shù)添加到 subs 中。不知道各位還是否記得上面我們說(shuō)到的在 reduce 里的那兩行代碼。因?yàn)樵趫?zhí)行計(jì)算 test1 和 test2 第一次 computed 值的時(shí)候,會(huì)調(diào)用 test 的 getter 方法,此刻就是一個(gè)好機(jī)會(huì)將函數(shù)注入到 subs 中,在 data 上聲明一個(gè) $target 變量,并將需要執(zhí)行的函數(shù)賦值給該變量,這樣在 getter 中就可以判斷 data 上有無(wú) target 值,從而就可以 push 進(jìn) subs,要注意的是需要馬上將 target 設(shè)為 null,這就是第二句的用途,這樣就達(dá)到了一石二鳥的作用。當(dāng)然,這其實(shí)就是 vue 里的原理,只不過(guò)這里沒(méi)那么復(fù)雜。
到此為止已經(jīng)實(shí)現(xiàn)了 watch 和 computed,但是還沒(méi)完,有個(gè)問(wèn)題。當(dāng)同時(shí)使用這兩者的時(shí)候,watch 里的對(duì)象的鍵也同時(shí)存在于 data 中,這樣就會(huì)重復(fù)在該變量上調(diào)用 Object.defineProperty ,后面會(huì)覆蓋前面。因?yàn)檫@里不像 vue 里可以決定兩者的調(diào)用順序,因此我們推薦先寫 computed 再寫 watch,這樣可以 watch computed 里的值。這樣就有一個(gè)問(wèn)題,computed 會(huì)因覆蓋而無(wú)效。
思考一下為什么?
很明顯,這時(shí)因?yàn)橹暗?subs 被重新聲明為空數(shù)組了。這時(shí),我們想一個(gè)簡(jiǎn)單的方法就是把之前 computed 里的 subs 存在一個(gè)地方,下一次調(diào)用 defineReactive 的時(shí)候看對(duì)應(yīng)的 key 是否已經(jīng)有了 subs,這樣就可以解決問(wèn)題。修改一下代碼。
function defineReactive(data, key, val, fn) { let subs = data['$' + key] || [] // 新增 Object.defineProperty(data, key, { configurable: true, enumerable: true, get: function() { if (data.$target) { subs.push(data.$target) data['$' + key] = subs // 新增 } return val }, set: function(newVal) { if (newVal === val) return fn && fn(newVal) if (subs.length) { // 用 setTimeout 因?yàn)榇藭r(shí) this.data 還沒(méi)更新 setTimeout(() => { subs.forEach(sub => sub()) }, 0) } val = newVal }, }) }
這樣,我們就一步一步的實(shí)現(xiàn)了所需的功能。完整的代碼和例子請(qǐng)戳。
雖然經(jīng)過(guò)了一些測(cè)試,但不保證沒(méi)有其它未知錯(cuò)誤,歡迎提出問(wèn)題。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)