首頁(yè) 猿問(wèn) vue雙向綁定問(wèn)題

vue雙向綁定問(wèn)題

Vue.js

翻過(guò)高山走不出你 2019-03-18 21:02:34

1.初始化 vue時(shí)，會(huì)通過(guò)數(shù)據(jù)劫持給data中的每個(gè)屬性設(shè)置get和set方法2.每個(gè)get中通過(guò)dep.depend()將當(dāng)前的watch添加到subs搜集器中3.設(shè)置新值時(shí)，觸發(fā)set中的dep.notify()去通知 watch.update更新視圖現(xiàn)在疑問(wèn)1.data中的每個(gè)屬性觸發(fā)set，怎么知道當(dāng)前屬性跟哪個(gè) dep對(duì)應(yīng)綁定的呢？我看網(wǎng)上說(shuō)是通過(guò)閉包，這樣的話(huà)，data中變量過(guò)多，會(huì)不會(huì)產(chǎn)生性能問(wèn)題2.初始化vue實(shí)例時(shí)，Dep.taget的當(dāng)前watch，是什么時(shí)候入棧的，我看watch里的get方法頂部pushTarget入棧,后方法結(jié)束前又popTarget了### 問(wèn)題描述

查看完整描述

2 回答

慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

每個(gè)屬性都會(huì)對(duì)應(yīng)一個(gè)dep，在觸發(fā)get函數(shù)時(shí)入棧

反對(duì) 回復(fù) 2019-03-18

哆啦的時(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);
????????}
????}
}

反對(duì) 回復(fù) 2019-03-18