vue響應式Object代理對象的修改和刪除屬性

Posted on by

正文

上一篇文章我們學習瞭如何代理對象的讀取，下面我們學習如何代理對象的修改和刪除屬性。

set

set就是修改代理的屬性，按照我們之前寫的reactive,它大概是這樣的

const ITERATE_KEY=symbol()
const p = new Proxy(obj,{
 set(target,key,newVal,receiver){
        const res = Reflect.set(target,key,newVal,receiver)
        trigger(target,key)
        return res
  }
}

細心的朋友應該發現瞭，我專門把ITERATE_KEY也加進來瞭，但是在set中並沒有使用，難道是多餘的？

這裡其實有一個小坑，就是如果曾經對對象使用過for ... in，這裡會出現2種情況：

  • 如果我們新增瞭一個屬性，那麼我們是不是應該重新運行一次for ... in的副作用函數。
  • 如果我們隻是修改某個屬性而不是新增，那麼我們就不應該重新運行for ... in的副作用函數. 所以我們需要判斷一下它是新增還是修改
//定義常量，在ts中可以使用枚舉
const TriggerType = {
    SET:'SET',
    ADD:'ADD'
}
const p = new Proxy(obj,{
 set(target,key,newVal,receiver){
         //判斷新增還是修改
         const type = Object.prototype.hasOwnProperty.call(target,key) 
         ? TriggerType.SET
         : TriggerType.ADD
        const res = Reflect.set(target,key,newVal,receiver)
        trigger(target,key,type)
        return res
  }
}

同時，對應trigger函數中，我們也需要根據type讀取ITERATE_KEY對應的副作用函數.

const trigger = (target,key,type)=>{
    const depsMap = targetMap.get(target)
    if(!depsMap){
        return 
    }
    const effects = depsMap.get(key)
    // 再次去重
    const needToRun = new Set()
    if(effects){
        effects.forEach(e=> e!==activeEffect
            ? needToRun.add(e)
            : ''
        )
    }
    if(type === TriggerType.ADD){
        const otherEffects = depsMap.get(ITERATE_KEY)
        if(otherEffects){
            otherEffects.forEach(e=> e!==activeEffect
                ? needToRun.add(e)
                : ''
            )
        }
    }
    if(needToRun.length){
        needToRun.forEach(fn=> fn?.options?.scheduler ? fn.options.scheduler(fn) : fun())
    }
}

這樣，我們隻在新增的時候才會調用for ... in的副作用函數。

delete

刪除的時候，之前貌似沒寫過。這裡需要註意2個點。

  • 保證屬性刪除之後才運行副作用，這裡從邏輯上講我們最好先驗證這個屬性是否存在，避免報錯。
  • 刪除時也要運行for ... in的副作用函數

因此我們這樣定義，給TriggerType新增一個類型DEL

const TriggerType = {
    SET:'SET',
    ADD:'ADD',
    DEL:'DELETE'
}

然後，我們開始攔截刪除屬性的操作，查一下之前的Proxy內部方法的表，我們可以得知，刪除屬性對應著deleteProperty方法。

const p = new Proxy(obj,{
 deleteProperty(target,key){
         //判斷屬性存在，你總不能刪除一個不存在的屬性吧
        const hadKey = Object.prototype.hasOwnProperty.call(target,key)  
        const res = Reflect.deleteProperty(target,key)
        if(res && hadKey){
            trigger(target,key,TriggerType.DEL)
        }
        return res
  }
}

對應trigger函數中，我們小修改一下,其他邏輯不變

// 刪除這句
- if(type === TriggerType.ADD){
// 改為
+ if([TriggerType.ADD,TriggerType.DEL].includes(type)){

這樣就可以實現響應式對象的刪除屬性。

其實原文中並沒有使用Array.includes,但我覺得其實我們應該使用最新的語法，現在瀏覽器環境對這些新語法支持度已經很好瞭(如果你要兼容IE當我沒說)。

這一篇就完結瞭，總結一下就是如何對對象的讀取屬性、修改屬性、刪除屬性進行代理，大概瞭解vue3中對於對象的處理。

但是這裡還沒有結束，後續會講一些邊際條件，以及如何合理的響應數據變化和操作，合理也就是優化，盡可能的減少多餘的響應。

更多關於vue響應式Object修改刪除的資料請關註WalkonNet其它相關文章！

推薦閱讀：