1. 程式人生 > >對比起來學習前端三大框架(持續更新)

對比起來學習前端三大框架(持續更新)

angular:

資料雙向繫結,模板功能強大。依賴注入和自定義directive非常靈活。

學習路線長,框架偏重。

優缺點詳見:angularJS在實際開發中有哪些優缺點?

vue:

輕量級。每一個元件自帶shouldComponentUpdate

 

react:

虛擬DOM操作,設定state值render頁面。

 

在vue的官網中有提到,跟其他框架的不同,可以去仔細瞭解一下。vue對比其他框架

官網的涉及到的東西比較深,也沒有那麼淺顯易懂,所以想通過自己的理解再去總結。

 

react和vue進行對比:二者都採用的是virtual DOM的方式去渲染元件。

(1)語法

react推崇的是JSX語法,在學習react之前還要去出不瞭解JSX語法。簡單說是HTML  CSS  in   JavaScript。

vue與之不同的是語法更友好,簡單說是ALL IN  Vue。可以像之前寫HTML5一樣去寫vue,webpack+vue-loader的單檔案格式,再搭配前端模組化,大的小的都能hold住,less等等的也都可以使用,這個語法還是非常爽的~

(2)資料流

理論上,react要採用單向資料流,但是真正在開發的時候,還是可以通過callback等方式來進行子元件對父元件傳值,不會有任何影響。但是引入flux概念,有了redux,強制將state抽取出來集中去管理。雖然更難去掌握,但是也讓react的狀態管理機制更加完善。

vue的資料流預設也是單向的,但是可以使用v-model去進行雙向的資料流繫結操作。vue的在應用大型頁面的時候也會有這樣的state管理的問題,所以有了vuex。

(3)使用場景

借用尤雨溪大佬的話:

使用場景上來說:React 配合嚴格的 Flux 架構,適合超大規模多人協作的複雜專案。理論上 Vue 配合類似架構也可以勝任這樣的用例,但缺少類似 Flux 這樣的官方架構。小快靈的專案上,Vue 和 React 的選擇更多是開發風格的偏好。對於需要對 DOM 進行很多自定義操作的專案,Vue 的靈活性優於 React。


(4)render

react是通過遞迴的方式去遍歷DOM樹,實現diff;而vue是自帶檢查機制。

react應用中,為了避免不要的子元件重渲染,需要部分手動實現shouldComponentUpdate。而這一點vue是更加出色的,元件的依賴是在渲染過程中自動追蹤的。有興趣的可以去列印一下vue中data的值,都會有一個不可列舉屬性“__ob__”。這個屬性就是相當於追蹤屬性,精確的知道哪個元件確實需要被渲染。可以理解為每個元件都是有react的shouldComponentUpdate。

參考知乎vue和react使用場景和深度有什麼不同

Vue和React區別

個人還是很喜歡vue和尤雨溪大佬的。

搬運的新資料  關於Vue和React區別

 

react和angular對比,同樣都是Model Driven View

(1)語法

react採用的JSX語法,angular推崇使用typescript,也可以直接用js寫。配合上ts還是很爽,後端的也能很快習慣ts的開發。react更注重的是在view層,用state的改變去re-render頁面。angular是雙向繫結,更加註重的是model層,更加擅長對資料的處理和業務邏輯。

 

 

 

想通過自己在公司接觸的不同專案和使用的不同框架總結自己的經驗,如果有不對的地方,歡迎指正。