共计 2052 个字符，预计需要花费 6 分钟才能阅读完成。
什么是双向绑定
简单说就是在数据和 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。
