前端框架學習總結之Angular、React與Vue的比較詳解

NO IMAGE

近幾年前端的技術發展很快,細分下來,主要可以分成四個方面:

      1.開發語言技術,主要是ES6&7,coffeescript,typescript等;

      2.開發框架,如Angular,React,Vue.js,Angular2等;

      3.開發工具的豐富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha這些技術;

      4.前端開發範圍的擴充套件,如服務端的nodejs,express,koa,meteor,GraphQL;移動端和跨平臺的PhoneGap,ionic,ReactNative,Weex;計算機圖形學和3維建模領域的WebGL(three.js等);視覺化與資料分析領域的d3.js等;包括瀏覽器不斷開放的更多新特性和介面比如svg,canvas,藍芽,電池,本地儲存,service worker,Houdini等新的API能力,以及像WASM這樣的底層優化技術;

就開發框架這塊,Angular(1&2),React,Vue目前佔據著主流地位而且會相持比較長的一段時間,所以這裡對比一下這三門技術,以便之後的技術選型。

一、資料流

資料繫結

Angular 使用雙向繫結即:介面的操作能實時反映到資料,資料的變更能實時展現到介面。

實現原理:

$scope變數中使用髒值檢查來實現。像ember.js是基於setter,getter的觀測機制,

$scope.$watch函式,監視一個變數的變化。函式有三引數,”要觀察什麼”,”在變化時要發生什麼”,以及你要監視的是一個變數還是一個物件。

使用ng-model時,你可以使用雙向資料繫結。

使用$scope.$watch(檢視到模型)以及$scope.$apply(模型到檢視),還有$scope.$digest

呼叫$scope.$watch時只為它傳遞了一個引數,無論作用域中的什麼東西發生了變化,這個函式都會被呼叫。在ng-model中,這個函式被用來檢查模型和檢視有沒有同步,如果沒有同步,它將會使用新值來更新模型資料。

雙向繫結的三個重要方法:


$scope.$apply()
$scope.$digest()
$scope.$watch()

在AngularJS雙向繫結中,有2個很重要的概念叫做dirty check,digest loop,dirty check(髒檢測)是用來檢查繫結的scope中的物件的狀態的,例如,在js裡建立了一個物件,並且把這個物件繫結在scope下,這樣這個物件就處於digest loop中,loop通過遍歷這些物件來發現他們是否改變,如果改變就會呼叫相應的處理方法來實現雙向繫結

Vue 也支援雙向繫結,預設為單向繫結,資料從父元件單向傳給子元件。在大型應用中使用單向繫結讓資料流易於理解。

髒檢測的利弊

和ember.js等技術的getter/setter觀測機制相比(優):

getter/setter當每次對DOM產生變更,它都要修改DOM樹的結構,效能影響大,Angular會把批量操作延時到一次更新,效能相對較好。

和Vue相比(劣):

Vue.js 有更好的效能,並且非常非常容易優化,因為它不使用髒檢查。Angular,當 watcher 越來越多時會變得越來越慢,因為作用域內的每一次變化,所有 watcher 都要重新計算。並且,如果一些 watcher 觸發另一個更新,髒檢查迴圈(digest cycle)可能要執行多次。 Angular 使用者常常要使用深奧的技術,以解決髒檢查迴圈的問題。有時沒有簡單的辦法來優化有大量 watcher 的作用域。Vue.js 則根本沒有這個問題,因為它使用基於依賴追蹤的觀察系統並且非同步列隊更新,所有的資料變化都是獨立地觸發,除非它們之間有明確的依賴關係。唯一需要做的優化是在 v-for 上使用 track-by。

React-單向資料流

MVVM流的Angular和Vue,都是通過類似模板的語法,描述介面狀態與資料的繫結關係,然後通過內部轉換,把這個結構建立起來,當介面發生變化的時候,按照配置規則去更新相應的資料,然後,再根據配置好的規則去,從資料更新介面狀態。

React推崇的是函數語言程式設計和單向資料流:給定原始介面(或資料),施加一個變化,就能推匯出另外一個狀態(介面或者資料的更新)。

React和Vue都可以配合Redux來管理狀態資料。

二、檢視渲染

Angular1

AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,所有的指令都負責針對view(即HTML中的ng-model)來設定資料繫結。因此, NG框架是在DOM載入完成之後, 才開始起作用的。

React

React 的渲染建立在 Virtual DOM 上——一種在記憶體中描述 DOM 樹狀態的資料結構。當狀態發生變化時,React 重新渲染 Virtual DOM,比較計算之後給真實 DOM 打補丁。

Virtual DOM 提供了函式式的方法描述檢視,它不使用資料觀察機制,每次更新都會重新渲染整個應用,因此從定義上保證了檢視與資料的同步。它也開闢了 JavaScript 同構應用的可能性。

在超大量資料的首屏渲染速度上,React 有一定優勢,因為 Vue 的渲染機制啟動時候要做的工作比較多,而且 React 支援服務端渲染。

React 的 Virtual DOM 也需要優化。複雜的應用裡可以選擇 1. 手動新增 shouldComponentUpdate 來避免不需要的 vdom re-render;2. Components 儘可能都用 pureRenderMixin,然後採用 Flux 結構 Immutable.js。其實也不是那麼簡單的。相比之下,Vue 由於採用依賴追蹤,預設就是優化狀態:動了多少資料,就觸發多少更新,不多也不少。

React 和 Angular 2 都有服務端渲染和原生渲染的功能。

Vue.js 不使用 Virtual DOM 而是使用真實 DOM 作為模板,資料繫結到真實節點。Vue.js 的應用環境必須提供 DOM。Vue.js 有時效能會比 React 好**,而且幾乎不用手工優化。

三、效能與優化

效能方面,這幾個主流框架都應該可以輕鬆應付大部分常見場景的效能需求,區別在於可優化性和優化對於開發體驗的影響。Vue 的話需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手動指定 change detection strategy。從整體趨勢上來說,瀏覽器和手機還會越變越快,框架本身的渲染效能在整個前端效能優化體系中,會漸漸淡化,更多的優化點還是在構建方式、快取、圖片載入、網路鏈路、HTTP/2 等方面。

四、模組化與元件化

Angular1 -> Angular2

Angular1使用依賴注入來解決模組之間的依賴問題,模組幾乎都依賴於注入容器以及其他相關功能。不是非同步載入的,根據依賴列出第一次載入所需的所有依賴。

可以配合類似於Require.js來實現非同步載入,懶載入(按需載入)則是藉助於 ocLazyLoad 方式的解決方案,但是理想情況下應該是本地框架會更易懂。

Angular2使用ES6的module來定義模組,也考慮了動態載入的需求。

Vue

Vue中指令和元件分得更清晰。指令只封裝 DOM 操作,而元件代表一個自給自足的獨立單元 —— 有自己的檢視和資料邏輯**。在 Angular1 中兩者有不少相混的地方。

React

一個 React 應用就是構建在 React 元件之上的。

元件有兩個核心概念:props,state。

一個元件就是通過這兩個屬性的值在 render 方法裡面生成這個元件對應的 HTML 結構。

傳統的 MVC 是將模板放在其他地方,比如 script 標籤或者模板檔案,再在 JS 中通過某種手段引用模板。按這種思路,想想多少次我們面對四處分散的模板片段不知所措?糾結模板引擎,糾結模板存放位置,糾結如何引用模板。

React 認為元件才是王道,而元件是和模板緊密關聯的,元件模板和元件邏輯分離讓問題複雜化了。所以就有了 JSX 這種語法,就是為了把 HTML 模板直接嵌入到 JS 程式碼裡面,這樣就做到了模板和元件關聯,但是 JS 不支援這種包含 HTML 的語法,所以需要通過工具將 JSX 編譯輸出成 JS 程式碼才能使用(可以進行跨平臺開發的依據,通過不同的直譯器解釋成不同平臺上執行的程式碼,由此可以有RN和React開發桌面客戶端)。

五、語法與程式碼風格

React,Vue,Angular2都支援ES6,Angular2官方擁抱了TypeScript這種 JavaScript 風格。

React 以 JavaScript 為中心,Angular 2 依然保留以 HTML 為中心。Angular 2 將 “JS” 嵌入 HTML。React 將 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 試圖讓 HTML 更強大的方式。

React 推薦的做法是 JSX inline style,也就是把 HTML 和 CSS 全都整進 JavaScript 了。Vue 的預設 API 是以簡單易上手為目標,但是進階之後推薦的是使用 webpack vue-loader 的單檔案元件格式(template,script,style寫在一個vue檔案裡作為一個元件)

總結

好了,以上就是這篇文章的全部內容了,本文的話題實際上很大,需要對Angular,React和Vue三門技術有足夠深入的瞭解,所以難免有很多總結的不全或者不夠深入的地方,後續我會不斷完善和修改。希望本文的內容對大家的學習或者工作能帶來一定的幫助。

您可能感興趣的文章:

VueJs與ReactJS和AngularJS的異同點淺談vue,angular,react資料雙向繫結原理分析利用angular、react和vue實現相同的面試題元件