1.初始化 vue時，會通過數(shù)據(jù)劫持 給data中的每個屬性設(shè)置get和set方法2.每個get中通過dep.depend()將當(dāng)前的watch添加到subs搜集器中3.設(shè)置新值時，觸發(fā)set中的dep.notify()去通知 watch.update更新 視圖現(xiàn)在疑問1.data中的每個屬性觸發(fā)set，怎么知道當(dāng)前屬性跟哪個 dep對應(yīng)綁定的呢？我看網(wǎng)上說是通過閉包，這樣的話，data中變量過多，會不會產(chǎn)生性能問題2.初始化vue實例時，Dep.taget的當(dāng)前watch，是什么時候入棧的，我看watch里的get方法頂部pushTarget入棧,后方法結(jié)束前又popTarget了### 問題描述
2 回答
飲歌長嘯
TA貢獻1951條經(jīng)驗 獲得超3個贊
可以再網(wǎng)上找一些簡單的實現(xiàn)：
function observer(obj) { if (!obj || typeof obj !== 'object') { return ;
} Object.keys(obj).forEach((key) => {
reactive(obj, key, obj[key]);
});
}function reactive(obj, key, value) {
observer(value); const dep = new Dep(); Object.defineProperty(obj, key, { configurable: false, enumerable: true,
get() {
Dep.target && dep.addSub(Dep.target); return value;
},
set(newValue) {
value = newValue;
dep.notify();
}
})
}class Dep{ constructor() { this.subs = [];
}
addSub(sub) { this.subs.push(sub);
}
notify() { this.subs.forEach(sub => {
sub.update();
});
}
}class Watcher{ constructor(vm, exp, cb){ this.vm = vm; this.exp = exp; this.cb = cb; this.value = this.get();
}
get() {
Dep.target = this; const value = this.vm[this.exp];
Dep.target = null; return value;
}
update() { const oldValue = this.value; const value = this.get(); if (oldValue !== value){ this.value = value; this.cb.call(this.vm, value, oldValue);
}
}
}添加回答
舉報
0/150
提交
取消