本文給大家具體分析了下vue,angular,avalon這三種MVVM框架優(yōu)缺點(diǎn)，十分的細(xì)致全面，有需要的小伙伴可以參考下

本文的主要內(nèi)容是參考官方文檔說明總結(jié)而來：

Vue.js

Vue.js @尤雨溪 老師寫的一個(gè)用于創(chuàng)建 web 交互界面的庫，是一個(gè)精簡的 MVVM。從技術(shù)角度講，Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來。實(shí)際的 DOM 封裝和輸出格式都被抽象為了Directives 和 Filters。Vue.js和其他庫相比是一個(gè)小而美的庫，作者的主要目的是通過一個(gè)盡量簡單的 API 產(chǎn)生可反映的數(shù)據(jù)綁定和可組合的視圖組件，感覺作者的思路非常清晰。

優(yōu)點(diǎn)：

簡單：官方文檔很清晰，比 Angular 簡單易學(xué)。

快速：異步批處理方式更新 DOM。

組合：用解耦的、可復(fù)用的組件組合你的應(yīng)用程序。

緊湊：~18kb min+gzip，且無依賴。

強(qiáng)大：表達(dá)式 & 無需聲明依賴的可推導(dǎo)屬性 (computed properties)。

對(duì)模塊友好：可以通過 NPM、Bower 或 Duo 安裝，不強(qiáng)迫你所有的代碼都遵循 Angular 的各種規(guī)定，使用場景更加靈活。

缺點(diǎn)：

新生兒：Vue.js是一個(gè)新的項(xiàng)目，2014年3月20日發(fā)布的0.10.0 Release Candidate版本，目前github上面最新的是0.11.4版本，沒有angular那么成熟。

影響度不是很大：google了一下，有關(guān)于Vue.js多樣性或者說豐富性少于其他一些有名的庫。

不支持IE8：哈哈不過AngularJS 1.3也拋棄了對(duì)IE8的支持，但是 @司徒正美 老師的avalon是支持IE6+的，應(yīng)該下了很多努力去優(yōu)化。這一點(diǎn)對(duì)于那些需要支持IE8的項(xiàng)目就不好了，不過這也是web前端開發(fā)的一個(gè)趨勢，像IE低版本就應(yīng)該退出歷史舞臺(tái)了，通過改變我們的前端思維，而不是順應(yīng)那些使用老版本而不去升級(jí)的人。 @玉伯老師就說過一句話，我覺得說的非常好“這年頭，支持 IE6、7 早就不再是特性，而是恥辱。努力推動(dòng)支付寶全面不支持 IE6、7，期待更多兄弟加盟”。

AngularJS

AngularJS最近很火，追隨者也很多。 Superheroic JavaScript MVW Framework

官方說得很樸素：“完全使用JavaScript編寫的客戶端技術(shù)。同其他歷史悠久的Web技術(shù)（HTML、CSS和JavaScript）配合使用，使Web應(yīng)用開發(fā)比以往更簡單、更快捷“。當(dāng)你學(xué)習(xí)它的時(shí)候，我相信你會(huì)被它的很多新特效所吸引。

優(yōu)點(diǎn)：

動(dòng)態(tài)視圖：以前從來沒有想過js可以如此擴(kuò)展HTML的屬性，但是AngularJs做到了，它替我們靜態(tài)的HTML加了很多擴(kuò)展性功能，有一種讓HTML由死變活的感覺。

完善：是一個(gè)比較完善的前端MVW框架，包含模板，數(shù)據(jù)雙向綁定，路由，模塊化，服務(wù)，依賴注入等所有功能，模板功能強(qiáng)大豐富，并且是聲明式的，自帶了豐富的 Angular 指令。

Google維護(hù)：AngularJS有Google來維護(hù)，無疑有了一個(gè)強(qiáng)大的后臺(tái)，對(duì)于推廣和維護(hù)明顯比Vue.js和avalon有優(yōu)勢，社區(qū)也非?；顫?，能夠很好促進(jìn)它的發(fā)展。

AngularJS & Ionic：Ionic: Advanced HTML5 Hybrid Mobile App Framework，這倆就是一個(gè)好基友，Ionic通過用AngularJS為了創(chuàng)建一個(gè)框架，最適合開發(fā)的豐富和強(qiáng)大的應(yīng)用程序。上次于知乎答了一個(gè)相關(guān)問題做webapp開發(fā)，性能和效率最好的框架和打包app平臺(tái)分別是哪個(gè)？ - 湯威的回答，詳細(xì)可以見這里。

缺點(diǎn)：

大而全：學(xué)習(xí)起來有難度，對(duì)于我來講學(xué)習(xí)曲線很曲折，比較難理解一些。

推翻重寫：前段時(shí)候逛社區(qū)發(fā)現(xiàn)AngularJS2.0會(huì)把之前的推翻重寫，兩個(gè)框架的改變很大，基本是兩個(gè)框架了，等于是說等到2.0出來后又需要從頭開始，不過又說回來， http://www.jb51.net/article/79637.htm這篇文章很好說明了AngularJS2.0的變化。

不支持IE8以下，貌似2.0變得只支持移動(dòng)端了，等到出來后再看吧。

Avalon.js

Avalon.js是 @司徒正美 老師所寫的個(gè)簡單易用迷你的MVVM框架，它最早發(fā)布于2012.09.15，為解決同一業(yè)務(wù)邏輯存在各種視圖呈現(xiàn)而開發(fā)出來的。常?？梢钥吹嚼蠋熗茝V他的Avalon.js，出了很多教程，無疑對(duì)國內(nèi)學(xué)習(xí)Avalon.js的人提供了巨大方便。

優(yōu)點(diǎn)

使用簡單，在HTML中添加綁定，在JS中用avalon.define定義ViewModel，再調(diào)用avalon.scan方法，它就能動(dòng)了！

兼容到 IE6 (其他MVVM框架，KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) )，另有avalon.mobile，它可以更高效地運(yùn)行于IE10等新版本瀏覽器中

沒有任何依賴，不到5000行，壓縮后不到50KiB

支持管道符風(fēng)格的過濾函數(shù)，方便格式化輸出

局部刷新的顆粒度已細(xì)化到一個(gè)文本節(jié)點(diǎn)，特性節(jié)點(diǎn)

要操作的節(jié)點(diǎn)，在第一次掃描就與視圖刷新函數(shù)相綁定，并緩存起來，因此沒有選擇器出場的余地。

讓DOM操作的代碼近乎絕跡

使用類似CSS的重疊覆蓋機(jī)制，讓各個(gè)ViewModel分區(qū)交替地渲染頁面

節(jié)點(diǎn)移除時(shí)，智能卸載對(duì)應(yīng)的視圖刷新函數(shù)，節(jié)約內(nèi)存

操作數(shù)據(jù)即操作DOM，對(duì)ViewModel的操作都會(huì)同步到View與Model去

自帶AMD模塊加載器，省得與其他加載器進(jìn)行整合。

缺點(diǎn)

1，對(duì)數(shù)組的過濾沒有angular那么方面，avalon的過濾器只能用于ms-text, ms-html

2，沒有英文文檔，宣傳受到限制

3，OniUI的皮膚不夠好看，許多人說要配合boostrap，但社區(qū)還沒有人主動(dòng)站出來做這事