vue.js和angular双向数据绑定的实现原理

一、vue双向数据绑定

1、原理

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

2、实现步骤

要实现mvvm的双向绑定，就必须要实现以下几点：

• 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
• 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
• 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
• mvvm入口函数，整合以上三者

上述流程如图所示：

文献来源：剖析Vue原理&实现双向绑定MVVM

二、angular双向数据绑定

1、原理

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

2、实现流程如下

• DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

• XHR响应事件 ( $http )

• 浏览器Location变更事件 ( $location )

• Timer事件( timeout,interval )

• 执行 digest()或apply()

文献参考：AngularJs 双向绑定原理(数据绑定机制)

三、总结

待补充