vue設計與實現(xiàn)合理的觸發(fā)響應實例分析

本文小編為大家詳細介紹“vue設計與實現(xiàn)合理的觸發(fā)響應實例分析”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“vue設計與實現(xiàn)合理的觸發(fā)響應實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

正文

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

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

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

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

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

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

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

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

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

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

• 原型鏈繼承問題

這個其實是一種比較特殊的情況，真不知道當時是怎么測試出來的。首先，我們把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個響應式對象，同時通過Object.setPrototypeOf設置一個指定的對象的原型( 即，內(nèi)部[[Prototype]] 屬性），這里我認為就是強制指定了一種繼承關(guān)系，一個Proxy實例繼承了另一個Proxy實例，同時被繼承的那個實例則有一個副作用。

這個問題其實解釋起來蠻復雜的，首先第一步，我們先看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)大概能知道作者如何解決了。我們應當保留最外層的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 
             }
         }
        //其他邏輯不變
    },
})

讀到這里，這篇“vue設計與實現(xiàn)合理的觸發(fā)響應實例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。