鍍金池/ 問(wèn)答/HTML/ vue源碼疑惑

vue源碼疑惑

function Observer(obj,key,value){
    var dep = new Dep();
    if(Object.prototype.toString.call(value) == "[object object]"){
        Object.keys(value).forEach(function(key){
            new Observer(value,key,value[key])
        })
    }
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable:true,
        get:function(){
            if(Dep.target){
                dep.addSub(Dep.target)
            }
            return value;
        },
        set:function(newVal){
            value = newVal;
            dep.notify();
        }
    })
}

function Watcher(fn){
    this.update = function(){
        Dep.target= this;
        fn();
        Dep.target = null;
    }
    this.update();
}

function Dep(){
    this.sub = [];
    this.addSub = function(watcher){
        this.sub.push(watcher)
    }
    this.notify = function(){
        this.sub.forEach(function(watcher){
            watcher.update();
        })
    }
}

var obj = {
    a: 1,
    b: 2,
    c: 3
}
Object.keys(obj).forEach(function(key){
    new Observer(obj, key, obj[key])
});
new Watcher(function(){
    document.querySelector("#test").innerHTML = obj.a;
})


上面代碼是我看到別人寫(xiě)的雙向綁定,但是有一點(diǎn)我不明白,為什么Dep下面的sub是數(shù)組,因?yàn)槲矣X(jué)得現(xiàn)在這段代碼中每一個(gè)sub數(shù)組中都會(huì)存儲(chǔ)相同的watcher對(duì)象,而且每一次都要將以前添加進(jìn)去的watcher對(duì)象執(zhí)行一遍,我覺(jué)得這不是不合理嗎,不是應(yīng)該只執(zhí)行這一次添加進(jìn)去的watcher就可以了嗎

可能我理解有錯(cuò)誤,請(qǐng)指出,謝謝

回答
編輯回答
臭榴蓮
  1. 對(duì)一個(gè)屬性建立了多個(gè)watcher,都存到了sub隊(duì)列里,那么這個(gè)屬性改變的時(shí)候,就要執(zhí)行全部的watch的更新啊,所以要遍歷然后watcher.update()。
  2. 新增watcher的時(shí)候并沒(méi)有全部執(zhí)行一遍,只執(zhí)行了fn()這一步,沒(méi)有走notify。
2018年7月28日 01:52