解析Vue2.0双向绑定实现原理

一、实现双向绑定的做法

前端MVVM最令人激动的就是双向绑定机制了，实现双向数据绑定的做法大致有如下三种：

1.发布者-订阅者模式（backbone.js）

思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素。

2.脏值检查（angular.js）

思路：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测，大致如下：

• DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
• XHR响应事件 ( $http )
• 浏览器Location变更事件 ( $location )
• Timer事件( $timeout,$interval )
• 执行 $digest() 或 $apply()

3.数据劫持（Vue.js）

思路： vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

由此可见，Object.defineProperty() 这个API是Vue实现双向数据绑定的关键，我们先简单了解下这个API，了解更多戳这里

二、Object.defineProperty()

简单例子：

结果：

如果去掉 obj.hello=‘111' 这行代码，则get的返回值val会报错val is not defined。可见Object.defineProperty() 监控对数据的操作，可以自动触发数据同步。下面我们先用Object.defineProperty()来实现一个非常简单的双向绑定。

三、实现简单的双向绑定

最简单例子：

实现效果如下：

上面例子直接用了dom操作改变了文本节点的值，而且是在我们知道是哪个id的情况下，通过document.getElementById 获取到相应的文本节点，然后直接修改文本节点的值，这种做法是最简单粗暴的。

封装成一个框架，肯定不能是这种做法，所以我们需要一个解析dom，并能修改dom中相应的变量的模块。

四、实现简单Compile

首先我们需要获取文本中真实的dom节点，然后再分析节点的类型，根据节点类型做相应的处理。

在上面例子我们多次操作了dom节点，为提高性能和效率，会先将所有的节点转换城文档碎片fragment进行编译操作，解析操作完成后，再将fragment添加到原来的真实dom节点中。