什么是双向绑定
简单说就是在数据和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.实现一个Observer
Observer是一个数据监听器，其实现核心方法就是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。
发表回复