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ò)閉包，這樣的話，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 回答
守著星空守著你
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊
每個(gè)屬性都會(huì)對(duì)應(yīng)一個(gè)dep，在觸發(fā)get函數(shù)時(shí)入棧
飲歌長(zhǎng)嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(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
提交
取消