1.初始化 vue時(shí)，會(huì)通過數(shù)據(jù)劫持 給data中的每個(gè)屬性設(shè)置get和set方法2.每個(gè)get中通過dep.depend()將當(dāng)前的watch添加到subs搜集器中3.設(shè)置新值時(shí)，觸發(fā)set中的dep.notify()去通知 watch.update更新 視圖現(xiàn)在疑問1.data中的每個(gè)屬性觸發(fā)set，怎么知道當(dāng)前屬性跟哪個(gè) dep對(duì)應(yīng)綁定的呢？我看網(wǎng)上說是通過閉包，這樣的話，data中變量過多，會(huì)不會(huì)產(chǎn)生性能問題2.初始化vue實(shí)例時(shí)，Dep.taget的當(dāng)前watch，是什么時(shí)候入棧的，我看watch里的get方法頂部pushTarget入棧,后方法結(jié)束前又popTarget了### 問題描述
2 回答
慕田峪7331174
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
每個(gè)屬性都會(huì)對(duì)應(yīng)一個(gè)dep，在觸發(fā)get函數(shù)時(shí)入棧
哆啦的時(shí)光機(jī)
TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊
可以再網(wǎng)上找一些簡(jiǎn)單的實(shí)現(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);
????????}
????}
}添加回答
舉報(bào)
0/150
提交
取消