vue設計與實現合理的觸發響應

Posted on by

正文

前文中講完瞭如何實現對Object的響應，包含瞭讀取屬性，修改值，刪除屬性.但這裡缺少很多優化，我們隻能說是簡單的實現瞭功能，但是有很多邊際條件我們並沒有考慮到。

現在跟著作者，看看我們還需要考慮什麼。

  • 當值沒有發生變化時 比如這樣
const p = reactive({a:1})
effect(()=>{
    console.log(p.a)
})
p.a=1

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

我們考慮到瞭相同的值，這時候應該不觸發響應。於是你簡單的思考下，寫下瞭如下代碼

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

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

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

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

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

這樣就解決瞭，當值沒有發生變化時的響應。

  • 原型鏈繼承問題

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

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執行2次

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

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

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

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

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

當我分析到這裡的時候，我已經大概能知道作者如何解決瞭。我們應當保留最外層的Proxy，然後讓其原型鏈上的其他Proxy指向原始對象。

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

那麼我們也就這樣試一下

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

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

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

以上就是vue設計與實現合理的觸發響應的詳細內容，更多關於vue合理觸發響應的資料請關註WalkonNet其它相關文章！

推薦閱讀：