1.4 Vue與Angular

無論在代碼體積和性能上面，Vue都比Angular1、Angular 2表現(xiàn)得優(yōu)異許多，這里不再贅述。筆者選擇了以下幾個(gè)方面來對(duì)比分析Vue和Angular的表現(xiàn)。

1.4.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í)慣。

Angular 2語法：

     <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>

1.4.2 臟檢測(cè)

Vue與Angular 1相比最大的區(qū)別在于沒有臟檢測(cè)機(jī)制。在Angular 1中存在多個(gè)watcher，當(dāng)watcher越來越多時(shí)，檢測(cè)耗時(shí)會(huì)越來越長。因?yàn)樽饔糜蛑忻堪l(fā)生一次變化，所有watcher都要重新計(jì)算，而一些watcher在計(jì)算之后可能又會(huì)導(dǎo)致新的變化，并引發(fā)所有watcher重新計(jì)算，從而進(jìn)入一種無限循環(huán)的臟檢測(cè)。

Angular 1的處理方式是設(shè)置循環(huán)上限，比如10次，當(dāng)循環(huán)達(dá)到10次，即中止循環(huán)。顯然，這種臟檢測(cè)機(jī)制性能十分低下、耗時(shí)長，并不適合大型Web應(yīng)用。

Vue的處理方式則是全局只設(shè)置一個(gè)watcher，用這一個(gè)watcher來記錄和更新一組關(guān)聯(lián)對(duì)象的值，從而回避了臟檢測(cè)的問題。

有意思的是，Vue最初是參考Angular的，而Angular 2則借鑒了Vue的機(jī)制，采用相似的設(shè)計(jì)來解決臟檢測(cè)存在的問題。

1.4.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ù)綁定。顯然，它是一個(gè)重量級(jí)框架。

在單向數(shù)據(jù)綁定中，視圖模板和動(dòng)態(tài)數(shù)據(jù)被渲染成網(wǎng)頁后，數(shù)據(jù)流即中止，如圖1.12所示。之后，由ViewModel接手與View層的數(shù)據(jù)綁定。View層不可以直接修改Model層的數(shù)據(jù)，如果需要修改Model層的數(shù)據(jù)，則由ViewModel發(fā)起請(qǐng)求，這中間存在ViewModel和Model之間的數(shù)據(jù)同步傳輸。

然而，在雙向數(shù)據(jù)綁定中，Model和View始終建立著聯(lián)系，Model層的數(shù)據(jù)也一直保持著真實(shí)的狀態(tài)，如圖1.13所示。

1.4.4 學(xué)習(xí)曲線

最后一點(diǎn)，廣為人知且津津樂道的是，Angular的學(xué)習(xí)曲線十分陡峭，初學(xué)者可能會(huì)有一種坐過山車的感覺。不過，筆者在2016年，接觸過一個(gè)使用Angular 1進(jìn)行開發(fā)的項(xiàng)目，當(dāng)時(shí)感覺坡度是有的，但沒有那么夸張，也可能是因?yàn)閼?yīng)用比較淺吧。

Vue的學(xué)習(xí)曲線則較為平緩，在Ember、Knockout、Angular、React等前輩踏平的道路上，Vue有更多趨于成熟的最佳實(shí)踐可以拿來使用，也有更多的經(jīng)驗(yàn)教訓(xùn)可以參考，從而設(shè)計(jì)出更簡便的API來實(shí)現(xiàn)更復(fù)雜的功能。同時(shí)，這也有效降低了團(tuán)隊(duì)開發(fā)成本，并使得大型Web項(xiàng)目的構(gòu)建變得更加容易。