Vue 与 Angular

无论在代码体积和性能上面，Vue都比Angular1、Angular2表现得优异许多。

1. 模板语法

Vue有许多语法和Angular十分相似，可以认为Angular是Vue的灵感之源。
因为尤雨溪当时在Google创意实验室，使用的就是Google主推的Angular框架。
但是，随着使用程度不断加深，尤感觉Angular十分笨重，因此这才创造了Vue。在Vue的诞生过程中，有很多地方都借鉴了Angular的语法习惯。

• Angular2语法：

<input type="text" [(ngModel)]= "name" />
<button (click)="onSave($event)"> Save </button>
<ul>
  <li *ngFor="letheroofheroes" [title]="hero.name" (click)="delete(hero)">{{hero.name}}</li>
</ul>
<form #heroForm (ngSubmit)="submit()"></form>

• Vue语法：

<input type="text" v-model= "name" />
<button v-on:click="onSave($event)"> Save </button>
<ul>
  <li v-for="heroinheroes" v-bind:title="hero.name" v-on:click="delete(hero)">{{hero.name}}</li>
</ul>
<form ref="heroForm" v-on:submit="submit()"></form>

2. 脏检测

Vue和Angular1相比最大的区别在于没有脏检测机制。
在Angular1中存在多个watcher，当watcher越来越多时，检测耗时会越来越长。因为作用域中每发生一次变化，所有watcher都要重新计算，而一些watcher在计算之后可能又会导致新的变化，并引发所有watcher重新计算，从而进入一种无限循环的脏检测。

• Angular1的处理方式是设置循环上限，比如10次，当循环达到10次，即中止循环，显然，这种脏检测机制性能十分低下、耗时长，并不适合大型Web应用。
• Vue的处理方式则是全局只设置一个watcher，用这一个watcher来记录和更新一组关联对象的值，从而回避了脏检测的问题。
  有意思的是，Vue最初是参考Angular得到，而Angular2则借鉴了Vue的机制，采用相似的设计来解决脏检测存在的问题。

3. 双向数据绑定

轻、重量级框架划分的标准是，是否过分参与系统结构级的架构和功能上的伸缩拓展。
和Vue、React这样的轻量级框架相比，Angular在单向数据流的视图渲染、事件绑定之外，还参与了View对Model层的数据更新，即双向数据绑定。
显然，Angular它是一个重量级框架。

• 在单向数据绑定中，视图模板和动态数据被渲染成网页后，数据流即中止。之后，由ViewModel接手与View层的数据绑定。View层不可以直接修改Model层的数据，如果需要修改Model层的数据，则由ViewModel发起请求，这中间存在ViewModel和model之间的数据同步传输。

  
  单向数据绑定

• 在双向数据绑定中，Model和View始终建立着联系，Model层的数据也一直保持着真实的状态。

  
  双向数据绑定