什么是双向绑定简单说就是在数据和UI之间建立双向的通信通道，当用户通过Function改变了数据，那么这个改变也会立即反映到UI上；或者说用户通过UI的操作也会随之引起对应的数据变动。Vue是如何实现双向数据绑定的？数据劫持？什么意思呢？太笼统了。与其说是数据劫持，更应该说是对象数据对象的setter和Getter实现劫持。但是Object.defineProperty仅仅是实现了对数据的监控，后续实现对UI的重新渲染并不是它做的，所以这里还涉及到发布-订阅模式；过程是，当监控的数据对象被更改后，这个变更会被广播给所有订阅该数据的watcher，然后由该watcher实现对页面的重新渲染。步骤：首先要对数据进行劫持，所以我们需要设置一个监听器Observer，用来监听所有的属性。如果属性发生变化，就需要告诉订阅者Watcher看是否需要更新。订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。还需要一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行相应的更新函数，从而更新视图。1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据及初始化相应的订阅器。流程图如下：1.实现一个ObserverObserver是一个数据监听器，其实现核心方法就是Object.defineProperty().如果要对所有属性都进行监听的话，那么可以通过递归方法遍历所有属性值，并对其进行Object.defineProperty()处理。function defineReactive(data,key.val){ observe(val);//递归遍历所有子属性 Obejct.defineProperty(data,key,{ enumerable:true, configurable:true, get:function(){ return val; }, set:function(newVal){ val = newVal; console.log(‘属性’+key+‘已经被监听了’) } })}function observe(data){ if(!data || typeof data !==‘object’){ return; } Object.keys(data).forEach(function(key){ defineReactive(data,key,data[key]) })}var library={ book1:{ name:’’ }, book2:’’}observe(library);library.book1.name=‘123’;library.book2=‘456’思路分析中，需要创建一个可以容纳订阅者的消息订阅器Dep，订阅器Dep主要负责收集订阅者，然后再属性变化的时候执行对应订阅者的更新函数。所以显然订阅者需要有一个容器，这个容器就是list，将上面的Observer稍微改造下，植入消息订阅者：function defineReactive(data,key,val){ observe(val)//递归遍历所有子属性 var dep = new Dep(); Object.defineProperty(data,key,{ enumerable:true, configurable:true, get:function(){ if(是否需要添加订阅者){ dep.addSub(watcher);//在这里添加一个订阅者 } return val; }, set:function(newVal){ if(val === newVal){ return; } val = newVal; console.log(‘属性’+key+‘已经被监听了’); dep.notify(); } })}function Dep(){ this.subs = [];}Dep.prototype={ addSub:function(sub){ this.subs.push(sub); }, notify:function(){ this.subs.forEach(function(sub){ sub.update(); }) }}从代码上看，我们将订阅器Dep添加一个订阅者设计在getter里面，这是为了让Watcher初始化进行触发，因此需要判断是否需要添加订阅者。在setter函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新函数。到此，一个比较完整的Obsever已经实现了，接下来我们开始设计Watcher。