Vue双向绑定的实现原理系列（三）：监听器Observer和订阅者Watcher

监听器Observer和订阅者Watcher

实现简单版Vue的过程，主要实现{{}}、v-model和事件指令的功能

主要分为三个部分

github源码

 1.数据监听器Observer，能够对数据对象的所有属性进行监听;实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性2.Watcher将数据监听器和指令解析器连接起来，数据的属性变动时，执行指令绑定的相应回调函数，1.如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。3.指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。=

监听器Observer

Observer是一个数据监听器，核心是前面一直谈论的Object.defineProperty(),
对所有属性监听，利用递归来遍历所有的属性值，对其进行Object.defineProperty()操作：

    function definReactive(data,key,val){observers(val);//递归所有子属性Object.defineProperty(data,key,{enumerable:true,configurable:true,get:function(){console.log('属性'+key+'执行get');return val;},set:function(newVal){val = newVal;console.log('属性：'+key+'以及被监听，现在值为：'+newVal.toString());}})}function observers(data){if(!data || typeof data!='object'){return;}Object.keys(data).forEach(function(key){definReactive(data,key,data[key]);})}var library = {book1:{name:''},book2:''}observers(library);library.book1.name = 'vue书籍';library.book2 = '没有书';//属性book1执行get//属性：name以及被监听，现在值为：vue书籍//属性：book2以及被监听，现在值为：没有书

接下来创建一个收集所有订阅者的订阅器Dep,阅器Dep主要负责收集订阅者，然后再属性变化的时候执行对应订阅者的更新函数,
再改写一下订阅器Observer，创建一个observer.js：

    function Observe(data){this.data = data;this.walk(data);}Observe.prototype = {walk:function(data){var self = this;Object.keys(data).forEach(function(key) {self.defineReactive(data, key, data[key]);});},defineReactive:function(data,key,val){observers(val);//递归所有子属性var dep = new Dep();Object.defineProperty(data,key,{enumerable:true,configurable:true,get:function(){if(是否需要添加订阅者){dep.addSub(Watcher);//在这里添加一个订阅者}console.log('属性'+key+'执行get');return val;},set:function(newVal){if(val === newVal){return;}val = newVal;dep.notify();//如果数据变化，通知所有订阅者console.log('属性：'+key+'以及被监听，现在值为：'+newVal.toString());}})}}function observers(data){if(!data || typeof data!='object'){return;}return new Observe(data);}/**Dep:创建一个可以容纳订阅者的消息订阅器* **/function Dep(){this.subs = [];}Dep.prototype = {addSub:function(sub){//添加订阅者this.subs.push(sub);},notify:function(){//通知订阅者this.subs.forEach(function(sub){sub.update();})}}可以看出，订阅器Dep,添加一个订阅者是在Object.defineProperty()的get里面,这是为了让Watcher初始化进行触发，因此要判断是不是需要添加订阅者，后面解释。在set里面，如果数据变化，就会通知所有的订阅者，订阅者就会去执行对应的更新的函数以上，一个完整的订阅器完成。

订阅者Watcher

Watcher在初始化的时候要将自己添加进订阅者Dep中，如何做到：

已经知道监听器Observer是在get函数执行了添加订阅者Wather的操作的，

所以我们只要在订阅者Watcher初始化的时候触发对应的get函数，去执行添加订阅者操作即可，

那要如何触发get的函数:

只要获取对应的属性值就可以触发了，核心原因就是因为我们使用了Object.defineProperty()进行数据监听。

注意：

我们只要在订阅者Watcher初始化的时候才需要添加订阅者，所以需要做一个判断操作，

因此可以在订阅器上做一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就可以了。

创建一个watcher.js

    function Watcher(vm,exp,cb){this.cb = cb;this.vm = vm;this.exp = exp;this.value = this.get();//将自己添加到订阅器的操作}Watcher.prototype = {update:function () {this.run();},run:function () {var value = this.vm.data[this.exp];var oldVal = this.value;if(value != oldVal){this.value = value;this.cb.call(this.vm,value,oldVal);}},get:function () {Dep.target = this;//缓存自己var value = this.vm.data[this.exp];//强制执行监听器observer里的Object.defineProperty()里的get函数Dep.target = null;//释放自己return value;}}

再调整下observer.js的defineReactive函数里的get操作：

    defineReactive:function(data,key,val){observers(val);//递归所有子属性var dep = new Dep();Object.defineProperty(data,key,{enumerable:true,configurable:true,get:function(){if(Dep.target){dep.addSub(Dep.target);//在这里添加一个订阅者}console.log('属性'+key+'执行get');return val;},set:function(newVal){if(val === newVal){return;}val = newVal;dep.notify();//如果数据变化，通知所有订阅者console.log('属性：'+key+'以及被监听，现在值为：'+newVal.toString());}})}//Dep加个target属性function Dep(){this.subs = [];this.target = null;}

简单版的Watcher设计好了，
只要将Observer和Watcher关联起来，就可以实现一个简单的双向绑定数据了。
这里没有还没有设计解析器Compile，所以对于模板数据我们都进行写死处理：
模板有个节点，id为name,双向数据绑定的变量name，这里大框号暂时没有用：

<body> <h1 id="name">{{name}}</h1>
</body>

selVue.js 关联Observer和Watcher

    function SelfVue(data,el,exp){this.data = data;observers(data);el.innerHTML = this.data[exp];//初始化模板数据的值new Watcher(this,exp,function(value){el.innerHTML = value;});return this;}

页面上实现双向数据绑定：

<h1 id="name">{{name}}</h1><script src="js/observer.js"></script><script src="js/watcher.js"></script><script src="js/selfVue.js"></script><script>var ele = document.querySelector('#name');var self_Vue = new SelfVue({name:'第一次显示数据'},ele,'name');window.setTimeout(function(){console.log('值变了');self_Vue.data.name = '重新赋值了';},2000);</script>

打开页面，可以看到页面刚开始显示了是“第一次显示数据”，过了2s后就变成“重新赋值了”了。到这里，完成了一部分

注意：赋值的时候是 self_Vue.data.name = '重新赋值了'，但是希望是 self_Vue.name = '重新赋值了'，
需要在new SelVue的时候做个代理，让访问self_Vue的属性代理为访问self_Vue.data的属性，
实现原理还是使用Object.defineProperty()对属性再包一层，

修改selVue.js：

    function SelfVue(data,el,exp){var self = this;this.data = data;Object.keys(data).forEach(function (key) {self.proxyKeys(key);//绑定代理属性});observers(data);el.innerHTML = this.data[exp];//初始化模板数据的值new Watcher(this,exp,function(value){el.innerHTML = value;});return this;}SelfVue.prototype = {proxyKeys:function(key){var self = this;Object.defineProperty(this,key,{enumerable:false,configurable:true,get:function proxyGetter(){return self.data[key];},set:function proxySetter(newVal){self.data[key] = newVal;}})}}//这下我们就可以直接通过self_Vue.name = '重新赋值了'的形式来进行改变模板数据。

至此监听器Observer和订阅者Watcher功能基本完成，后面再加上指令解析器compile的功能！

系列文章的目录:

Vue双向绑定的实现原理系列（一）：Object.defineproperty
Vue双向绑定的实现原理系列（二）：设计模式
Vue双向绑定的实现原理系列（三）：监听器Observer和订阅者Watcher
Vue双向绑定的实现原理系列（四）：补充指令解析器compile