Vue之九数据劫持实现MVVM的数据双向绑定

vue是经过数据劫持的方式来作数据绑定的，其中最核心的方法即是经过Object.defineProperty()来实现对属性的劫持，达到监听数据变更的目的。

若是不熟悉defineProperty，猛戳这里

 整理了一下，要实现mvvm的双向绑定，就必需要实现如下几点：
一、实现一个数据监听器Observer，可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者
二、实现一个指令解析器Compile，对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
三、实现一个Watcher，做为链接Observer和Compile的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数，从而更新视图
四、mvvm入口函数，整合以上三者

一、实现Observer

咱们知道能够利用Obeject.defineProperty()来监听属性变更
那么将须要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。。相关代码能够是这样：

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 监听到值变化了 kindeng --> dmq

function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出全部属性遍历
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};

function defineReactive(data, key, val) {
    observe(val); // 监听子属性
    Object.defineProperty(data, key, {
        enumerable: true, // 可枚举
        configurable: false, // 不能再define
        get: function() {
            return val;
        },
        set: function(newValue) {
            console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newValue);
            val = newValue;
        }
    });
}

　　上面的思路整理中咱们已经明确订阅者应该是Watcher, 并且var dep = new Dep();是在 defineReactive方法内部定义的，因此想经过dep添加订阅者

完整方法	
function Observer(data) {
			this.data = data;
			this.walk(data);
		}

		Observer.prototype = {
			walk: function(data) {
				var me = this;
				Object.keys(data).forEach(function(key) {
					me.convert(key, data[key]);
				});
			},
			convert: function(key, val) {
				this.defineReactive(this.data, key, val);
			},

			defineReactive: function(data, key, val) {
				var dep = new Dep();
				var childObj = observe(val);
				Object.defineProperty(data, key, {
					enumerable: true, // 可枚举
					configurable: false, // 不能再define
					get: function() {
						if(Dep.target) {
							dep.depend();
						}
						return val;
					},
					set: function(newVal) {
						if(newVal === val) {
							return;
						}
						val = newVal;
						// 新的值是object的话，进行监听
						childObj = observe(newVal);
						// 通知订阅者
						dep.notify();
					}
				});
			}
		};

		function observe(value, vm) {
			if(!value || typeof value !== 'object') {
				return;
			}

			return new Observer(value);
		};

		var uid = 0;

		function Dep() {
			this.id = uid++;
			this.subs = [];
		}

		Dep.prototype = {
			addSub: function(sub) {
				this.subs.push(sub);
				console.log(this.subs)
			},

			depend: function() {
				Dep.target.addDep(this);
			},

			removeSub: function(sub) {
				var index = this.subs.indexOf(sub);
				if(index != -1) {
					this.subs.splice(index, 1);
				}
			},

			notify: function() {
				this.subs.forEach(function(sub) {
					sub.update();
				});
			}
		};

		Dep.target = null;

　　这里已经实现了一个Observer了，已经具有了监听数据和数据变化通知订阅者的功能，那么接下来就是实现Compile了

 

二、实现Compile

compile主要作的事情是解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每一个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变更，收到通知，更新视图，如图所示：

 

 由于遍历解析的过程有屡次操做dom节点，为提升性能和效率，会先将跟节点el转换成文档碎片fragment进行解析编译操做，解析完成，再将fragment添加回原来的真实dom节点中

三、实现Watcher

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

实例化Watcher的时候，调用get()方法，经过Dep.target = watcherInstance标记订阅者是当前watcher实例，强行触发属性定义的getter方法，getter方法执行的时候，就会在属性的订阅器dep添加当前watcher实例，从而在属性值有变化的时候，watcherInstance就能收到更新通

四、实现MVVM

MVVM做为数据绑定的入口，整合Observer、Compile和Watcher三者，经过Observer来监听本身的model数据变化，经过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通讯桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变动的双向绑定效果。

知。

function MVVM(options) {
    this.$options = options;
    var data = this._data = this.$options.data, me = this;
    // 属性代理，实现 vm.xxx -> vm._data.xxx
    Object.keys(data).forEach(function(key) {
        me._proxy(key);
    });
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

MVVM.prototype = {
    _proxy: function(key) {
        var me = this;
        Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;
            }
        });
    }
};

　　这里主要仍是利用了Object.defineProperty()这个方法来劫持了vm实例对象的属性的读写权，使读写vm实例的属性转成读写了vm._data的属性值