正文

前文中講完了如何實現(xiàn)對Object的響應(yīng)，包含了讀取屬性，修改值，刪除屬性.但這里缺少很多優(yōu)化，我們只能說是簡單的實現(xiàn)了功能，但是有很多邊際條件我們并沒有考慮到。

現(xiàn)在跟著作者，看看我們還需要考慮什么。

• 當值沒有發(fā)生變化時 比如這樣

const p = reactive({a:1})
effect(()=>{
    console.log(p.a)
})
p.a=1

p.a的初始值就是1，然后你再次賦值為1，理論上我們就不需要再執(zhí)行副作用了，但是顯然在以前的代碼還是會執(zhí)行的。

我們考慮到了相同的值，這時候應(yīng)該不觸發(fā)響應(yīng)。于是你簡單的思考下，寫下了如下代碼

new Proxy(obj,{
 set(target,key,newVal,receivere){
     const oldVal = target[key]
     if(oldVal !== newVal){
         // do sth 
     }
 }
})

感覺上沒什么毛病，但是如果你的oldVal和newVal都等于NaN呢?NaN!==NaN,完全滿足不全等的條件，因此你還是會觸發(fā)一次響應(yīng)。

在書中，作者的解決辦法是,這樣去排除NaN

     const oldVal = target[key]
     if(oldVal !== newVal && (oldVal === oldVal && newVal === newVal)){
         // do sth 
     }

但是我覺得也可以這樣子const checkNaN = (any)=> typeof any === 'number' ? isNaN(any) : false.

這樣就解決了，當值沒有發(fā)生變化時的響應(yīng)。

• 原型鏈繼承問題

這個其實是一種比較特殊的情況，真不知道當時是怎么測試出來的。首先，我們把new Proxy封裝為一個函數(shù)

const handlers = {/*這里暫時省略*/}
const reactive = (obj)=>new Proxy(obj,handlers)
const obj = {}
const obj2 = {a:1}
const robj = reactive({})
const robj2 = reactive{a:1})
Object.setPrototypeOf(robj,robj2)
effect(()=>{
    console.log(robj.a)
})
robj.a++ //這里導致effect執(zhí)行2次

在這段代碼里，我們創(chuàng)建了2個響應(yīng)式對象，同時通過Object.setPrototypeOf設(shè)置一個指定的對象的原型( 即，內(nèi)部[[Prototype]] 屬性），這里我認為就是強制指定了一種繼承關(guān)系，一個Proxy實例繼承了另一個Proxy實例，同時被繼承的那個實例則有一個副作用。

這個問題其實解釋起來蠻復(fù)雜的，首先第一步，我們先看robj這個對象，對象上并沒有a這個屬性，那么熟悉原型鏈的各位大佬讀者們，肯定指定，js會沿著原型鏈依次向上查找，就會找到robj2，并執(zhí)行[[Get]]去獲取這個屬性，然后這個動作就會被Proxy攔截。

回憶一下我們之前的代碼，首先以target為key，建立一個依賴關(guān)系，收集所有的副作用，再通過key獲取具體的副作用函數(shù)，然后再根據(jù)一定條件觸發(fā)。

那么，當我們獲取robj.a時，js查找到robj2，這時候就會同時以robj2和robj2為key，建立兩個依賴關(guān)系，最后導致副作用執(zhí)行2次。 在前面講Proxy的時候，我們寫過這樣一句話.其中target指向的原始對象，receiver則是Proxy實例，也是this的指向。也就是在這個時候，this被改成了robj2

new Proxy(obj,{
    set(target,key,newVal,receiver){
        //do sth
        Reflect.set(target,key,newVal,receiver)
    }
})

當我分析到這里的時候，我已經(jīng)大概能知道作者如何解決了。我們應(yīng)當保留最外層的Proxy，然后讓其原型鏈上的其他Proxy指向原始對象。

也就是判斷receiver是不是來自robj，如果不是我們不能去收集和觸發(fā)依賴。也就是說，這個問題需要同時修改Proxy的get和set去解決。 這時候我想到了vue3中的ref,如果你直接打印一下，可以發(fā)現(xiàn)它有著這樣的結(jié)構(gòu)

那么我們也就這樣試一下

new Proxy(obj,{
    get(target,key,receiver){
        // 不進行后面的依賴收集
        if(key === '_rawValue'){
         return target
        }
        //其他邏輯不變
    },
    set(target,key,newVal,receiver){
        // 不觸發(fā)副作用
         if(target === receiver._rawValue){
             if(oldVal !== newVal && (oldVal === oldVal && newVal === newVal)){
                 // do sth 
             }
         }
        //其他邏輯不變
    },
})

這樣新增了一個字段，修復(fù)了這個觸發(fā)2次副作用的問題。我相信，在vue3中會有更多的判斷和處理，作者只是挑了2個典型來寫，這也是為什么上幾個章節(jié)會科普Proxy和Reflect的原因。

下一章會講到淺響應(yīng)與深響應(yīng)，對應(yīng)Vue3中的API就是shallowReactive與reactive

以上就是vue設(shè)計與實現(xiàn)合理的觸發(fā)響應(yīng)的詳細內(nèi)容，更多關(guān)于vue合理觸發(fā)響應(yīng)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論