概要:

現在， Vue 還沒有 React (由 Facebook 維護) 或者 Angular 2 (受到 Google 的支持) 流行。不過，許多開發者都已經轉向 Vue 了。Laravel 社區也在考慮將它作為可選用的前端框架之一。

總之，Vue 給 React & Angular 的弊病提供了一道良方，為你提供了一種更加簡單和輕松的方法來編寫代碼。

滿意度對比：

Hacker News?(https://news.ycombinator.com/item?id=15999688)

前端框架 / 滿意度	2016	2017
React	91％	93％
Vue?	91％	91％
Angular 2	65％	66％
Angular	40%	33%

? ? ? ? ? ? ? ??

1.首先，我們先了解什么是MVX框架模式？

? ? ??MVX框架模式：MVC+MVP+MVVM

? ? ??1.MVC：Model(模型)+View(視圖)+controller(控制器)，主要是基于分層的目的，讓彼此的職責分開。

? ? ??2.MVP：是從MVC模式演變而來的，都是通過Controller/Presenter負責邏輯的處理+Model提供數據+View負責顯示。

? ? ??3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。

2.使用MVVM好處：

　　1.?低耦合。View可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。??
　　2.?可重用性?？梢园岩恍┮晥D的邏輯放在ViewModel里面，讓很多View重用這段視圖邏輯。
　　3.?獨立開發。開發人員可以專注與業務邏輯和數據的開發(ViewModel)。設計人員可以專注于界面(View)的設計。
　　4.?可試性?？梢葬槍iewModel來對界面(View)進行測試?？梢葬槍iewModel來對界面(View)進行測試?　

3.Vue.js是什么？

看到了上面的框架模式介紹，我們可以知道它是屬于MVVM模式的框架。那它有哪些特性呢？

Vue.js 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。

Vue.js的特性如下：

1.輕量級的框架，易用

2.雙向數據綁定

3.指令化

4.組件化

4.與angularjs的區別

? ? 相同點：

都支持指令：內置指令和自定義指令。

都支持過濾器：內置過濾器和自定義過濾器。

都支持雙向數據綁定。

都不支持低端瀏覽器。

? ? 不同點：

? ? ? 1.更簡單易用

AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀。

? ? ? 2. 更靈活

比起 Angular更少專制，它能然你按照自己想要的方式構建應用，而非凡事非得 Angular 框架必須如此如此

? ? ? 3.性能更突出

AngularJS依賴對數據做臟檢查，當 watcher 越來越多時會變得越來越慢，因為作用域內的每一次變化，所

有 watcher 都要重新計算。并且，如果一些 watcher 觸發另一個更新，臟檢查循環（digest cycle）可能要

運行多次。?
Vue依賴追蹤的觀察系統并且異步列隊更新，所有的數據變化都是獨立地觸發，除非它們之間有明確的依賴

關系。唯一需要做的優化是在 v-for 上使用 track-by。做甚是2.0吸取的react的虛擬DOM的特性。

對于龐大的應用來說，這個優化差異還是比較明顯的。

5.與React的區別

? ? 相同點：

react采用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，

兩者都需要編譯后使用。

中心思想相同：一切都是組件，組件實例之間可以嵌套。

都提供合理的鉤子函數，可以讓開發者定制化地去處理需求。

都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載。

在組件開發中都支持mixins的特性。

? ? 不同點：

? ? ? 1.性能更好：

Vue性能上更有優勢，因為 Vue 的 Virtual DOM 實現相對更為輕量一些，整體大小比react.js更小更輕便

? ? ? 2.更易學更簡單：?
react.JS 彩用SX語法，對語大部分工程師入手比較困難，需要要大量的時間去學習適應這種新語法的形式，vue采用DOM模板的方法，易看易用

? ? ? 3.優化更好：

在 React 應用中，當某個組件的狀態發生變化時，它會以該組件為根，重新渲染整個組件子樹。如要避免不必要的子組件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時你可能會需要使用不可變的數據結構來使得你的組件更容易被優化。 然而，使用 PureComponent 和 shouldComponentUpdate 時，需要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。如果不符合這個情況，那么此類優化就會導致難以察覺的渲染結果不一致。這使得 React 中的組件優化伴隨著相當的負擔。

Vue 的這個特點使得開發者不再需要考慮此類優化，從而能夠更好地專注于應用本身。

綜上所述，在VUE.20更新以后。它更是吸取了 React 和 Angular 的教訓，同時也吸收了它們的成功之處。我們看到的 Vue.js 是輕量級且容易學習掌握的新型mvvm框架。

Vue.js 有更好的性能，并且非常非常容易優化，因為它不使用臟檢查。Angular，當 watcher 越來越多時會變得越來越慢，因為作用域內的每一次變化，所有 watcher 都要重新計算。并且，如果一些 watcher 觸發另一個更新，臟檢查循環（digest cycle）可能要運行多次。?Angular 用戶常常要使用深奧的技術，以解決臟檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的作用域。Vue.js 則根本沒有這個問題，因為它使用基于依賴追蹤的觀察系統并且異步列隊更新，所有的數據變化都是獨立地觸發，除非它們之間有明確的依賴關系。唯一需要做的優化是在 v-for 上使用 track-by。

總結

以上是生活随笔為你收集整理的推荐使用：Vue.js ReactJS Angular 2 AngularJS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。