vue与angular的异同

<meta charset="utf-8">

相同点：都拥有双向绑定机制和指令

不同点：

• ng是一个完整的mvvm框架，vue主要是view层展示
• ng双向绑定基于模板编译规则（脏检查），vue是采用es5的get和set机制。

https://segmentfault.com/a/1190000006599500

实现数据绑定的做法有大致如下几种：

• 发布者-订阅者模式（backbone.js）
• 脏值检查（angular.js）
• 数据劫持（vue.js）

angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方

式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定

的事件触发时进入脏值检测，大致如下：

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

VueJS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自

动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视

图，而不是对所有的数据都执行一次检测。数据与视图的绑定与同步，最终体现在对数据的读写

处理过程中，也就是 Object.defineProperty() 定义的数据 set、get 函数中.

在对数据进行读取时，如果当前有 Watcher（对数据的观察者吧，watcher 会负责将获取的

新数据发送给视图），那将该 Watcher 绑定到当前的数据上（dep.depend()，dep 关联当前数

据和所有的 watcher 的依赖关系），是一个检查并记录依赖的过程。而在对数据进行赋值时，如

果数据发生改变，则通知所有的 watcher（借助 dep.notify()）。这样，即便是我们手动改变了数

据，框架也能够自动将数据同步到视图。

初始化的过程中，Vue 是如何识别出这种绑定关系的呢？

通过分析源码，在初始化过程中（new Vue() 执行时），主要执行两个步骤：

• compile
• link

compile 过程中，对于给定的目标元素进行解析，识别出所有绑定在元素（通过 el 属性传

入）上的指令。

link 过程中，建立这些指令与对应数据（通过 data 属性传入初始值）的绑定关系，并以数据

的初始值进行渲染。绑定关系建立后，就可以双向同步数据了。