上一节的，响应式基本原理只适用当前组件（实例），
当其他子组件也依赖这些数据，或者有多个地方用到这个数据的时候，数据更新，其他的地方能收到通知，那么依赖收集就能用到了。
看代码
//一个属性拥有一个自己的dep对象
class Dep {
constructor () {
this.subs = [];
}
addSub (sub) {
this.subs.push(sub);
}
notify () {
this.subs.forEach((sub) => {
sub.update();
})
}
}
class Watcher {
update () {
console.log("视图更新啦～");
}
}
function observer (value) {
if (!value || (typeof value !== 'object')) {
return;
}
Object.keys(value).forEach((key) => {
defineReactive(value, key, value[key]);
});
}
let n=0
function defineReactive (obj, key, val) {
const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
n++
console.log(n,key)
dep.addSub(new Watcher());//区别点
return val;
},
set: function reactiveSetter (newVal) {
if (newVal === val) return;
dep.notify();
}
});
//console.log(dep)
}
class Vue {
constructor(options) {
this._data = options.data;
observer( this._data);
console.log('render~', this._data);
}
}
let a = new Vue({
data: {
x:1,
y:2
}
});
let b = new Vue({
data: {
w: "I am test. b",
z:3
}
});
调用了四次get，当值改变的时候，通知dep所有的wacher,即一个属性为一个Dep实例
51001.png
下面是染陌老师的
class Dep {
constructor () {
this.subs = [];
}
addSub (sub) {
this.subs.push(sub);
}
notify () {
this.subs.forEach((sub) => {
sub.update();
})
}
}
class Watcher {
constructor () {
Dep.target = this;
}
update () {
console.log("视图更新啦～");
}
}
function observer (value) {
if (!value || (typeof value !== 'object')) {
return;
}
Object.keys(value).forEach((key) => {
defineReactive(value, key, value[key]);
});
}
function defineReactive (obj, key, val) {
const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
dep.addSub(Dep.target);//区别点
/*
一个vue实例一个wacther(),对应着多个dep
*/
return val;
},
set: function reactiveSetter (newVal) {
if (newVal === val) return;
dep.notify();
}
});
}
class Vue {
constructor(options) {
this._data = options.data;
observer(this._data);
new Watcher();
console.log('render~', this._data.test);
}
}
let o = new Vue({
data: {
test: "I am test."
}
});
o._data.test = "hello,test.";
Dep.target = null;
在闭包中增加了一个 Dep 类的对象，用来收集 Watcher 对象。在对象被「读」的时候，会触发 reactiveGetter 函数把当前的 Watcher 对象（存放在 Dep.target 中）收集到 Dep 类中去。之后如果当该对象被「写」的时候，则会触发 reactiveSetter 方法，通知 Dep 类调用 notify 来触发所有 Watcher 对象的 update 方法更新对应视图。
