目录
前言
在面试中会经常问到vue2.x双向数据绑定是怎么实现的，大多数面试者都会回答Object.defineProperty()方法对属性进行拦截，把data中的每个数据的读写都转化成getter/setter，当数据发生变化时候通知试图进行更新。本文将详细论述双向数据绑定的原理是怎么实现。
MVVM模式
简单来说就是：
- 页面数据变化——>data中同步变化
- data中数据变化——>文本节点内容同步变化
页面中数据改变，我们可以用过事件监听得到，比如input 框中数据改变，我们可以通过oninput监听，但是data中数据的改变怎么更新到视图层呢？data中数据改变可以通过Object.defineProperty()对属性设置set属性，所以我们需要在set中添加一些更新数据的方法，就能够实现data变化更新视图。
实现双向数据绑定，首先需要对数据劫持监听，因此设置一个监听器Observer来监听数据。属性数据发生变化需要告诉订阅者Watcher是否需要更新数据。订阅者可能是多个（多个属性发生变化），所以就需要一个消息订阅器Dep收集这些订阅者，Observer和Watcher通过Dep进行统一管理。我们能监听数据是怎么改变，但是如何更新呢。我们就需要一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此我们需要四个操作：
- 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
- 实现一个订阅器 Dep，用来收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理
- 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
- 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
监听器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; } }); } function observe(data) { if (!data || typeof data !== 'object') { return; } //批量监听 Object.keys(data).forEach(function(key) { defineReactive(data, key, data[key]); }); };
我们需要一个容器能够放置这些订阅者，若有属性变化则对应的订阅者执行更新的函数。将上面代码更改，植入一个消息订阅者。
function Dep () { //订阅者集合 this.subs = []; } Dep.prototype = { //添加订阅者 addSub: function(sub) { this.subs.push(sub); }, //提醒订阅者更新视图 notify: function() { this.subs.forEach(function(sub) { sub.update(); }); } }; Dep.target = null; function defineReactive(data, key, val) { // 递归遍历所有子属性 observe(val); var dep = new Dep(); Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function() { //同一时间只能有一个Watcher执行且只有在watcher初始化的时候加入到消息订阅器，所以在消息订阅器中加入target属性 if (Dep.target) { // 在这里添加一个订阅者 dep.addSub(watcher); } return val; }, set: function(newVal) { if (val === newVal) return val = newVal; // 如果数据变化，通知所有订阅者 dep.notify(); } }); }
从代码上看，我们设计了一个订阅器 Dep 类，该类里面定义了一些属性和方法，这里需要特别注意的是它有一个静态属性 Dep.target，这是一个全局唯一 的Watcher，因为在同一时间只能有一个全局的 Watcher 被计算。
我们还将订阅器Dep添加一个订阅者设计在getter里面，这是为了让Watcher初始化进行触发，因此需要判断是否要添加订阅者，至于具体设计方案，下文会详细说明的。在setter函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新的函数。到此为止，一个比较完整Observer已经实现了，接下来我们开始设计Watcher。
订阅者Watcher
订阅者 Watcher 在初始化的时候需要将自己添加进订阅器 Dep 中，那该如何添加呢？我们已经知道监听器Observer 是在 get 函数执行了添加订阅者 Wather 的操作的，所以我们只要在订阅者 Watcher 初始化的时候触发对应的 get 函数去执行添加订阅者操作即可，那要如何触发 get 的函数，只要获取对应的属性值就可以触发了，核心原因就是因为我们使用了 Object.defineProperty( ) 进行数据监听。
这里还有一个细节点需要处理，我们只要在订阅者 Watcher 初始化的时候才需要添加订阅者，所以需要做一个判断操作，因此可以在订阅器上做一下手脚：在 Dep.target 上缓存下订阅者，添加成功后再将其去掉就可以了。订阅者 Watcher 的实现如下：
function Watcher(vm, exp, cb) { this.cb = cb;//更新函数 this.vm = vm;//vue实例对象 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; // 强制执行监听器里的get函数 var value = this.vm.data[this.exp] Dep.target = null; // 释放自己 return value; } };
订阅者Watcher中的参数：
- cb：更新函数
- vm：vue实例
- exp：node节点指令的属性值。比如
v-mode="data"，exp就是data。
当我们去实例化一个渲染 watcher 的时候，首先进入 watcher 的构造函数逻辑，就会执行它的 this.get() 方法，进入get 函数，首先会执行：
Dep.target = this;
将自己赋值为全局的订阅者 复制代码实际上就是把Dep.target 赋值为当前的渲染 watcher ,接着又执行
let value =this.vm.data[this.exp]
强制执行监听器里的get函数 复制代码在这个过程中会对 vm上的数据访问，其实就是为了触发数据对象的 getter。 每个对象值的 getter 都持有一个 dep，在触发 getter 的时候会调用 dep.depend() 方法，也就会执行this.addSub(Dep.target)，即把当前的 watcher 订阅到这个数据持有的dep 的 watchers 中，这个目的是为后续数据变化时候能通知到哪些 watchers 做准备。
这样实际上已经完成了一个依赖收集的过程。那么到这里就结束了吗？其实并没有，完成依赖收集后，还需要把 Dep.target恢复成上一个状态，即：
Dep.target = null;
释放自己 复制代码而 update() 函数是用来当数据发生变化时调Watcher 自身的更新函数进行更新的操作。先通过 let value = this.vm.data[this.exp]，获取到最新的数据,然后将其与之前 get() 获得的旧数据进行比较，如果不一样，则调用更新函数 cb 进行更新。 至此，简单的订阅者Watcher 设计完毕。
解析器Compile
通过监听器 Observer 订阅器 Dep 和订阅者 Watcher 的实现，其实就已经实现了一个双向数据绑定的例子，但是整个过程都没有去解析 dom 节点，而是直接固定某个节点进行替换数据的，所以接下来需要实现一个解析器 Compile 来做解析和绑定工作。解析器 Compile 实现步骤：
- 解析模板指令，并替换模板数据，初始化视图；
- 将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器。
我们下面对 ‘{{变量}}’ 这种形式的指令处理的关键代码进行分析，感受解析器 Compile 的处理逻辑，关键代码如下：
//解析元素 function compileElement (el) { var childNodes = el.childNodes; var self = this; [].slice.call(childNodes).forEach(function(node) { var reg = /\{\{(.*)\}\}/; var text = node.textContent; // 判断是否是符合这种形式{{}}的指令 if (self.isTextNode(node) && reg.test(text)) { self.compileText(node, reg.exec(text)[1]); } // 继续递归遍历子节点 if (node.childNodes && node.childNodes.length) { self.compileElement(node); } }); }, function compileText (node, exp) { var self = this; var initText = this.vm[exp]; // 将初始化的数据初始化到视图中 this.updateText(node, initText); // 生成订阅器并绑定更新函数 new Watcher(this.vm, exp, function (value) { self.updateText(node, value); }); }, function (node, value) { node.textContent = typeof value == 'undefined' ? '' : value; }
总结
从头撸到尾，还是很有收获的，参考了几位大佬的文章做了总结，收获满满。
