Vue之Dep和Observer的用法及说明
作者：陆小森_红齐飘飘
这篇文章主要介绍了Vue之Dep和Observer的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue 中响应式系统利用了订阅发布模式来实现基本的逻辑。本文将介绍其中的两个重要角色，他们就是Dep和Observer。其中Observer 是观察者和 Dep是订阅收集和发布者。另外watcher是作为订阅者的角色。
本文将重点将Observer和Dep。
一：Observer
vue 通过Observer 构造函数，为响应式变量添加访问和赋值的get set的回调。
var Observer = function Observer (value) {
this.value = value;
this.dep = new Dep();
this.vmCount = 0;
def(value, '__ob__', this);
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods);
} else {
copyAugment(value, arrayMethods, arrayKeys);
}
this.observeArray(value);
} else {
this.walk(value); // 这是非数组值添加get set 回调
}
};批量为obj上的key添加get set的回调
Observer.prototype.walk = function walk (obj) {
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
defineReactive$$1(obj, keys[i]);
}
};// 这个是为obj上的key添加get set方法的核心逻辑
function defineReactive$$1 (
obj,
key,
val,
customSetter,
shallow
) {
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key);
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
var getter = property && property.get;
var setter = property && property.set;
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
var childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// 省略N行
},
set: function reactiveSetter (newVal) {
// 省略N行
}
});
}有了这一层，当数据获取和修改就会触发这里的get 和 set
二：Dep 依赖关系
变量能够响应数据的获取和修改对于一个透明处理dom更新的框架来说是不够的，框架还需要处理变量和更新dom的watcher的依赖关系。Dep就是为了干这个事情的。
在之前的文章里，介绍过Watcher，vue中的组件在挂载前，都会基于组件的render函数，生成一个Watcher实例，并执行render函数来进行渲染
渲染dom的时候我们需要读取变量，这个时候就会触发我们上一步Observer为每个变量里量身定做的get方法。那vue在get里做了什么事情呢？
请看下面一段代码中的中文注释：
function defineReactive$$1 (
obj,
key,
val,
customSetter,
shallow
) {
var dep = new Dep(); // 创建一个Dep实例
var property = Object.getOwnPropertyDescriptor(obj, key);
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
var getter = property && property.get;
var setter = property && property.set;
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
var childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
//在此处将当前watcher加入到dep中
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
},此处有一个Dep.target 存在的条件判断，什么是Dep.target
Dep.target = null;
当watcher实例创建完，默认回去调用get方法来渲染组件界面
这个时候会通过pushTarget(this) 将当前watcher设置到Dep.target上去。
Watcher.prototype.get = function get () {
// 设置当前watcher到全局变量上去
pushTarget(this);
var value;
// 省略N行代码
return value
};pushTarget的具体实现
function pushTarget (target) {
targetStack.push(target);
Dep.target = target;
}这一步完成后，在调用render函数触发dom中响应式变量的get的时候
下面的代码就能够执行了
if (Dep.target) {
//在此处将当前watcher加入到dep中
dep.depend(); dep.depend 干了啥呢？
接着看：
Dep.prototype.depend = function depend () {
// Dep.target 对应的就是上面的全局变量里的watcher
if (Dep.target) {
Dep.target.addDep(this);
}
};也就是调用了watcher.addDep(this)
Watcher.prototype.addDep = function addDep (dep) {
var id = dep.id;
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id);
// 会在watcher的实际例子里维护一个所以订阅的dep的数组
this.newDeps.push(dep);
if (!this.depIds.has(id)) {
dep.addSub(this);
}
}
};
Dep.prototype.addSub = function addSub (sub) {
// 绕了一大圈，最终就是把watcher 塞到dep实例的subs数组里了。
this.subs.push(sub);
};到此，dom的渲染订阅者和数据的观察发布者就关联上了。
等用户修改数据的时候，触发为响应数据设计的set 回调函数
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val;
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (customSetter) {
customSetter();
}
// #7981: for accessor properties without setter
if (getter && !setter) { return }
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
// 重点看这里，这里是发布者发布数据变化的消息
// dep通知所有依赖的watcher
dep.notify();
}
});dep.notify做了啥事呢？
Dep.prototype.notify = function notify () {
// stabilize the subscriber list first
// subs就是上面get回调里，我们用来加入watcher依赖的数组
var subs = this.subs.slice();
if (!config.async) {
// subs aren't sorted in scheduler if not running async
// we need to sort them now to make sure they fire in correct
// order
subs.sort(function (a, b) { return a.id - b.id; });
}
for (var i = 0, l = subs.length; i < l; i++) {
// 遍历调用watcher的update方法
subs[i].update();
}
};Dep 的构造函数和其他实例方法：
// Dep的构造函数
var Dep = function Dep () {
this.id = uid++;
this.subs = [];
};
// 取消订阅
Dep.prototype.removeSub = function removeSub (sub) {
remove(this.subs, sub);
};其他相关
// 移除deps数组里的不在newDeps里的老的依赖，将之前newDeps收集的dep依赖丢给this.deps
Watcher.prototype.cleanupDeps = function cleanupDeps () {
var i = this.deps.length;
while (i--) {
var dep = this.deps[i];
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this);
}
}
var tmp = this.depIds;
this.depIds = this.newDepIds;
this.newDepIds = tmp;
this.newDepIds.clear();
tmp = this.deps;
this.deps = this.newDeps;
this.newDeps = tmp;
this.newDeps.length = 0;
};总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。