vue\angular\react區別

一、關于數據綁定

  • Angular
    使用雙向綁定即:界面的操作能實時反映到數據,數據的變更能實時展現到界面。

原理:
$scope變量中使用臟值檢查來實現。
$scope.$watch函數,監視一個變量的變化。函數有三參數,”要觀察什么”,”在變化時要發生什么”,以及你要監視的是一個變量還是一個對象。
使用ng-model時,你可以使用雙向數據綁定。
調用$scope.$watch時只為它傳遞了一個參數,無論作用域中的什么東西發生了變化,這個函數都會被調用。在ng-model中,這個函數被用來檢查模型和視圖有沒有同步,如果沒有同步,它將會使用新值來更新模型數據。

雙向綁定的三個重要方法:

$scope.$apply()

$scope.$digest()

$scope.$watch()

(臟檢測)是用來檢查綁定的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來管理狀態數據。

二、 視圖渲染

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

  • 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 等方面。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,247評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,520評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,362評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,805評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,541評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,896評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,887評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,062評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,608評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,356評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,555評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,077評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,769評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,175評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,489評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,289評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,516評論 2 379

推薦閱讀更多精彩內容