vue響應(yīng)式Object代理對(duì)象的修改和刪除屬性

更新時(shí)間：2022年08月02日 10:37:30 作者：冒菜師

這篇文章主要為大家介紹了vue響應(yīng)式Object代理對(duì)象的修改和刪除屬性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

上一篇文章我們學(xué)習(xí)了如何代理對(duì)象的讀取，下面我們學(xué)習(xí)如何代理對(duì)象的修改和刪除屬性。

set

set就是修改代理的屬性，按照我們之前寫(xiě)的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
  }
}

細(xì)心的朋友應(yīng)該發(fā)現(xiàn)了，我專(zhuān)門(mén)把ITERATE_KEY也加進(jìn)來(lái)了，但是在set中并沒(méi)有使用，難道是多余的？

這里其實(shí)有一個(gè)小坑，就是如果曾經(jīng)對(duì)對(duì)象使用過(guò)for ... in，這里會(huì)出現(xiàn)2種情況：

如果我們新增了一個(gè)屬性，那么我們是不是應(yīng)該重新運(yùn)行一次for ... in的副作用函數(shù)。
如果我們只是修改某個(gè)屬性而不是新增，那么我們就不應(yīng)該重新運(yùn)行for ... in的副作用函數(shù). 所以我們需要判斷一下它是新增還是修改

//定義常量，在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
  }
}

同時(shí)，對(duì)應(yīng)trigger函數(shù)中，我們也需要根據(jù)type讀取ITERATE_KEY對(duì)應(yīng)的副作用函數(shù).

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())
    }
}

這樣，我們只在新增的時(shí)候才會(huì)調(diào)用for ... in的副作用函數(shù)。

delete

刪除的時(shí)候，之前貌似沒(méi)寫(xiě)過(guò)。這里需要注意2個(gè)點(diǎn)。

保證屬性刪除之后才運(yùn)行副作用，這里從邏輯上講我們最好先驗(yàn)證這個(gè)屬性是否存在，避免報(bào)錯(cuò)。
刪除時(shí)也要運(yùn)行for ... in的副作用函數(shù)

因此我們這樣定義，給TriggerType新增一個(gè)類(lèi)型DEL

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

然后，我們開(kāi)始攔截刪除屬性的操作，查一下之前的Proxy內(nèi)部方法的表，我們可以得知，刪除屬性對(duì)應(yīng)著deleteProperty方法。

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

對(duì)應(yīng)trigger函數(shù)中，我們小修改一下,其他邏輯不變

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

這樣就可以實(shí)現(xiàn)響應(yīng)式對(duì)象的刪除屬性。

其實(shí)原文中并沒(méi)有使用Array.includes,但我覺(jué)得其實(shí)我們應(yīng)該使用最新的語(yǔ)法，現(xiàn)在瀏覽器環(huán)境對(duì)這些新語(yǔ)法支持度已經(jīng)很好了(如果你要兼容IE當(dāng)我沒(méi)說(shuō))。

這一篇就完結(jié)了，總結(jié)一下就是如何對(duì)對(duì)象的讀取屬性、修改屬性、刪除屬性進(jìn)行代理，大概了解vue3中對(duì)于對(duì)象的處理。

但是這里還沒(méi)有結(jié)束，后續(xù)會(huì)講一些邊際條件，以及如何合理的響應(yīng)數(shù)據(jù)變化和操作，合理也就是優(yōu)化，盡可能的減少多余的響應(yīng)。

更多關(guān)于vue響應(yīng)式Object修改刪除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: