web前端三大主流框架如何比較分析

比較如下：1、Vue，提供的API都比較簡單、直觀，使用DOM模板；2、Angular，依賴對資料做髒檢查，Watcher越多越慢；3、React，採用特殊的JSX語法，採用的Virtual DOM會對渲染出來的結果做髒檢查。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

MVX框架模式：MVC MVP MVVM

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

View透過Controller來和Model聯繫，Controller是View和Model的協調者，View和Model不直接聯繫，基本聯繫都是單向的。

使用者User透過控制器Controller來操作範本Model從而達到視圖View的變化。

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

在MVP中，Presenter完全把View和Model進行了分離，主要的程式邏輯在Presenter裡實作。

並且，Presenter和View是沒有直接關聯的，是透過定義好的介面進行交互，從而使得在變更View的時候可以保持Presenter不變。

MVP模式的框架：Riot,js。

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

View的變更會自動更新到Model, Model的變更也會自動同步到View上顯示。

這種自動同步是因為ViewModel中的屬性實作了Observer，當屬性變更時都能觸發對應的操作。

Vue.js是什麼？

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

其實Vue.js不是一個框架，因為它只聚焦視圖層，是一個建構資料驅動的Web介面的函式庫。

Vue.js透過簡單的API（應用程式介面）提供高效的資料綁定和靈活的元件系統。

Vue.js的特性如下：

1. 輕量級的框架

2. 雙向資料綁定

3. 指令

4. 外掛程式

Vue.js與其他框架的差別？

1. 與AngularJS的區別

相同點：

都支援指令：內建指令和自訂指令。

都支援過濾器：內建過濾器和自訂過濾器。

都支援雙向資料綁定。

都不支援低階瀏覽器。

不同點：

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

2.在效能上，AngularJS依賴對資料做髒檢查，所以Watcher越多越慢。

Vue.js使用基於依賴追蹤的觀察值並且使用非同步佇列更新。所有的數據都是獨立觸發的。

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

2. 與React的區別

相同點：

React採用特殊的JSX語法，Vue.js在元件開發中也推崇編寫.vue特殊檔案格式，對文件內容都有一些約定，兩者都需要編譯後再使用。

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

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

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

在元件開發中都支援mixins的特性。

不同點：

React依賴Virtual DOM,而Vue.js使用的是DOM模板。 React採用的Virtual DOM會對渲染出來的結果做髒檢查。

Vue.js在範本中提供了指令，過濾器等，可以非常方便，快速地操作DOM。

【推薦學習：javascript高階教學】

#

以上是web前端三大主流框架如何比較分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！