無論在代碼體積和性能上面，Vue都比Angular1、Angular2表現(xiàn)得優(yōu)異許多。
1. 模板語法
Vue有許多語法和Angular十分相似，可以認(rèn)為Angular是Vue的靈感之源。
因?yàn)橛扔晗?dāng)時(shí)在Google創(chuàng)意實(shí)驗(yàn)室，使用的就是Google主推的Angular框架。
但是，隨著使用程度不斷加深，尤感覺Angular十分笨重，因此這才創(chuàng)造了Vue。在Vue的誕生過程中，有很多地方都借鑒了Angular的語法習(xí)慣。
- 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相比最大的區(qū)別在于沒有臟檢測機(jī)制。
在Angular1中存在多個(gè)watcher，當(dāng)watcher越來越多時(shí)，檢測耗時(shí)會(huì)越來越長。因?yàn)樽饔糜蛑忻堪l(fā)生一次變化，所有watcher都要重新計(jì)算，而一些watcher在計(jì)算之后可能又會(huì)導(dǎo)致新的變化，并引發(fā)所有watcher重新計(jì)算，從而進(jìn)入一種無限循環(huán)的臟檢測。
- Angular1的處理方式是設(shè)置循環(huán)上限，比如10次，當(dāng)循環(huán)達(dá)到10次，即中止循環(huán)，顯然，這種臟檢測機(jī)制性能十分低下、耗時(shí)長，并不適合大型Web應(yīng)用。
- Vue的處理方式則是全局只設(shè)置一個(gè)watcher，用這一個(gè)watcher來記錄和更新一組關(guān)聯(lián)對(duì)象的值，從而回避了臟檢測的問題。
有意思的是，Vue最初是參考Angular得到，而Angular2則借鑒了Vue的機(jī)制，采用相似的設(shè)計(jì)來解決臟檢測存在的問題。
3. 雙向數(shù)據(jù)綁定
輕、重量級(jí)框架劃分的標(biāo)準(zhǔn)是，是否過分參與系統(tǒng)結(jié)構(gòu)級(jí)的架構(gòu)和功能上的伸縮拓展。
和Vue、React這樣的輕量級(jí)框架相比，Angular在單向數(shù)據(jù)流的視圖渲染、事件綁定之外，還參與了View對(duì)Model層的數(shù)據(jù)更新，即雙向數(shù)據(jù)綁定。
顯然，Angular它是一個(gè)重量級(jí)框架。
-
在單向數(shù)據(jù)綁定中，視圖模板和動(dòng)態(tài)數(shù)據(jù)被渲染成網(wǎng)頁后，數(shù)據(jù)流即中止。之后，由ViewModel接手與View層的數(shù)據(jù)綁定。View層不可以直接修改Model層的數(shù)據(jù)，如果需要修改Model層的數(shù)據(jù)，則由ViewModel發(fā)起請(qǐng)求，這中間存在ViewModel和model之間的數(shù)據(jù)同步傳輸。
單向數(shù)據(jù)綁定 -
在雙向數(shù)據(jù)綁定中，Model和View始終建立著聯(lián)系，Model層的數(shù)據(jù)也一直保持著真實(shí)的狀態(tài)。
雙向數(shù)據(jù)綁定
