watcher源码分析

1.watcher监听简介

Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

2.源码

function Watcher(vm, exp, cb) {
	this.cb = cb;
	this.vm = vm;
	this.exp = exp;
	this.depIds = {};
	this.value = this.get();
}

Watcher.prototype = {
	update: function() {
		this.run();
	},
	run: function() {
		var value = this.get();
		var oldVal = this.value;
		if (value !== oldVal) {
			this.value = value;
			this.cb.call(this.vm, value, oldVal);
		}
	},
	addDep: function(dep) {
		// 1. 每次调用run()的时候会触发相应属性的getter
		// getter里面会触发dep.depend()，继而触发这里的addDep
		// 2. 假如相应属性的dep.id已经在当前watcher的depIds里，说明不是一个新的属性，仅仅是改变了其值而已
		// 则不需要将当前watcher添加到该属性的dep里
		// 3. 假如相应属性是新的属性，则将当前watcher添加到新属性的dep里
		// 如通过 vm.child = {name: 'a'} 改变了 child.name 的值，child.name 就是个新属性
		// 则需要将当前watcher(child.name)加入到新的 child.name 的dep里
		// 因为此时 child.name 是个新值，之前的 setter、dep 都已经失效，如果不把 watcher 加入到新的 child.name 的dep中
		// 通过 child.name = xxx 赋值的时候，对应的 watcher 就收不到通知，等于失效了
	
		if (!this.depIds.hasOwnProperty(dep.id)) {
			dep.addSub(this);
			this.depIds[dep.id] = dep;
		}
	},
	get: function() {
		Dep.target = this;
		var value = this.getVMVal();
		Dep.target = null;
		return value;
	},

	getVMVal: function() {
		var exp = this.exp.split('.');
		var val = this.vm._data;
		exp.forEach(function(k) {
			val = val[k];
		});
		return val;
	}
};