正文

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

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

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

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

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

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

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

感覺上沒什么毛病，但是如果你的oldVal和newVal都等于NaN呢?NaN!==NaN,完全滿足不全等的條件，因此你還是會(huì)觸發(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.

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

• 原型鏈繼承問題

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

const handlers = {/*這里暫時(shí)省略*/}
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++ //這里導(dǎo)致effect執(zhí)行2次

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

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

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

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

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

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

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

那么我們也就這樣試一下

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

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

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

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