原理

在这里插入图片描述

视图（view）变化更新数据（data）。这个很简单，通过事件监听就可以实现
数据（data）变化更新视图（view）。通过数据劫持（即Object.defineProperty( )方法）结合发布者-订阅者模式

下面重点介绍数据变化更新视图。

总流程：
在这里插入图片描述

全文浓缩为一句话：
Vue是采用
1.数据劫持结合发布/订阅模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter

2. 在数据变动时发布消息给订阅者

3. 触发相应的监听回调

请看完再回过头来看这句话，下面是一个粗暴的双向数据绑定

数据劫持：Object.defineProperty方法

首先得了解一下这个方法有什么用：

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {set: function (value) {name = value;console.log('你取了一个书名叫做' + value);},get: function () {return '《' + name + '》'}
})Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

我们通过Object.defineProperty( )设置了对象Book的name属性，对其get和set进行重写操作，顾名思义，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数，所以当执行 Book.name = ‘vue权威指南’ 这个语句时，控制台会打印出 "你取了一个书名叫做vue权威指南
意思就是说：赋值的时候会触发set函数，取值的时候会触发get函数
这样，就有了数据变化更新视图的理论基础，如下图：

实现过程

实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

Ps：因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者
在这里插入图片描述

1.实现一个Observer（Object.defineProperty( ))

Observer = (Object.defineProperty() 监听 + 递归 ) + 订阅器

Observer是一个数据监听器，其实现核心方法就是前文所说的Object.defineProperty( )。如果要对所有属性都进行监听的话，那么可以通过递归方法遍历所有属性值，并对其进行Object.defineProperty( )处理。如下代码，实现了一个Observer。

function defineReactive(data, key, val) {observe(val); // 递归遍历所有子属性Object.defineProperty(data, key, {enumerable: true,configurable: true,get: function() {return val;},set: function(newVal) {val = newVal;console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');}});
}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 = 'vue权威指南'; // 属性name已经被监听了，现在值为：“vue权威指南”
library.book2 = '没有此书籍';  // 属性book2已经被监听了，现在值为：“没有此书籍”

思路分析中，需要创建一个可以容纳订阅者的消息订阅器Dep，订阅器Dep主要负责收集订阅者，然后再属性变化的时候执行对应订阅者的更新函数。所以显然订阅器需要有一个容器，这个容器就是list，将上面的Observer稍微改造下，植入消息订阅器：
Observer一旦有了set触发，就会通知到Dep

function defineReactive(data, key, val) {// observe(val); // 递归遍历所有子属性// var dep = new Dep(); Object.defineProperty(data, key, {// enumerable: true,// configurable: true,get: function() {//增加了这里//我们将订阅器Dep添加一个订阅者设计在getter里面，//这是为了让Watcher初始化进行触发，//因此需要判断是否要添加订阅者，至于具体设计方案，下文会详细说明的。if (是否需要添加订阅者) {dep.addSub(watcher); // 在这里添加一个订阅者}return val;},// set: function(newVal) {//     if (val === newVal) {//         return;//     }//     val = newVal;//     console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');//     dep.notify(); // 如果数据变化，通知所有订阅者// }});
}//下面是订阅器
function Dep () {this.subs = [];
}
Dep.prototype = {addSub: function(sub) {this.subs.push(sub);},notify: function() {this.subs.forEach(function(sub) {sub.update();});}
};

在setter函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新的函数。到此为止，一个比较完整Observer已经实现了，接下来我们开始设计Watcher。

2.实现Watcher

订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中
而监听器Observer是在get函数执行了添加订阅者Wather的操作的，所以我们只要在订阅者Watcher初始化的时候触发对应的get函数去执行添加订阅者操作即可
这里还有一个细节点需要处理，我们只要在订阅者Watcher初始化的时候才需要添加订阅者，所以需要做一个判断操作，因此可以在订阅器上做一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就可以了。订阅者Watcher的实现如下：

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]  // 强制执行监听器里的get函数Dep.target = null;  // 释放自己return value;}
};

这时候，我们需要对监听器Observer也做个稍微调整，主要是对应Watcher类原型上的get函数。需要调整地方在于defineReactive函数：

function defineReactive(data, key, val) {// observe(val); // 递归遍历所有子属性// var dep = new Dep(); Object.defineProperty(data, key, {// enumerable: true,// configurable: true,get: function() {if (Dep.target) {  // 判断是否需要添加订阅者dep.addSub(Dep.target); // 在这里添加一个订阅者}return val;},// set: function(newVal) {//     if (val === newVal) {//         return;//     }//     val = newVal;//     console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');//     dep.notify(); // 如果数据变化，通知所有订阅者// }});
}
Dep.target = null;