react.js,angular.js,vue.js學習哪一個好？

今天看了幾篇關於這三個主流框架的PK，如標題：react.js,angular.js,vue.js學習哪一個好？相信每一個人都有這種問題。

如今的前端框架層出不窮，做爲前端開發者何去何從？fackbook的react.js盛世火熱，react native打開了JS佔領android和ios領地，讓JS變的無所不能。angular.js背後有谷歌，我的感受過重了，相對而言更喜歡vue,可是實際選擇哪一個更好呢？總不能一下都學了也沒這個精力啊那麼當你讀完這篇文章或許你就有答案了！

對於初學React者。必定認爲這玩意真難學，還很差寫，還不如原生JS寫的6呢。沒錯起碼我如今是這麼以爲的，沒準之後會發現它的好呢也說不定。先來講說都有的感想：

認爲ReactJS在真正開發大型複雜系統的時候並很差，首先一點就是，一個完整頁面的HTML模板被徹底碎片化了，被分散到一個個的Component裏，這樣的話，UI Designer和Dev根本沒有一個統一的視圖去協做。

那麼，徐飛給你回答了這個問題，往下看：

咱們學一個東西，一般兩個目的：

1.爲了解決現有的問題

2.爲了解決未來可能會有的問題

因此，在學這些東西以前，先必須瞭解，它們是用來解決什麼問題的。

Angular，React，Vue，這三者其實面對的是同一個領域，那就是Web應用，什麼是Web應（前端作的都是web應用包括移動端）

這三者中，Angular的適用領域相對窄一些，React能夠拓展到服務端，移動端Native部分，而Vue由於比較輕量，還能用於業務場景很是輕的頁面中。

在Web應用中，咱們須要解決的問題能夠概括爲三類：

狀態
組織
效率
1. 狀態

在一個業務界面中，咱們可能會根據某些數據去生成一塊界面，而後經過界面上的某些操做，改變一些數據，從而影響界面的另一些部分。

這裏面就存在兩種關係，一種是從數據到界面，一種是從界面到數據。可以描述界面當前情況的數據，就能夠被稱爲狀態。

若是不對狀態做抽象，極可能會致使邏輯的混亂，好比說，一個地方點了，要改多個地方，這種代碼直接寫，很容易寫亂的，因此，不一樣的框架採用不一樣的方式進行了處理。

好比說MVVM流的Angular和Vue，還有Avalon，Regular，Knockout，都是走的這一流派，經過相似模板的語法，描述界面狀態與數據的綁定關係，而後經過內部轉換，把這個結構創建起來，當界面發生變化的時候，按照配置規則去更新相應的數據，而後，再根據配置好的規則去，從數據更新界面狀態。

React走的是另一個流派，就是所謂的函數式，在這個裏面，推崇的是單向數據流：給定原始界面（或數據），施加一個變化，就能推導出另一個狀態（界面或者數據的更新）。

在這裏須要額外提一下ReactiveJS，它的理念又有所不一樣，是基於Reactive的。

2. 組織

剛纔這些，均可以看做是知足最基本的需求，那就是業務的正確性。在這以後，就有另外的訴求了，首當其衝的就是整個業務代碼的組織。

所謂組織，指的是兩個方面，一方面是模塊關係，另外一方面是業務模型。

咱們剛纔提到組件化，整個應用造成了一個組件樹，組件之間可能會須要通信，它們通信的內容多是簡單的界面事件，也多是業務含義較深，可以牽一髮而動全身的。界面是怎麼來的？是由初始界面加上狀態造成的，爲了可以反映界面的變化，咱們必須使得對業務模型的每個擾動都收斂到確切的狀態，因此，這也就是Redux這類東西的意義所在。

再插另一句：不少人吐槽Angular大而全笨重，吐槽React全家桶，但其實世界上大部分人是沒有框架整合能力的，小而美的庫最後整合了，在面臨各類業務需求以後不斷引入新模塊，也仍是一個大而全的方案。在絕大部分場景下，仍是有一整套標配模塊比較好。你看ExtJS他也單獨提供ExtCore模塊，但不但競爭不過jQuery，連mootools和prototype都競爭不過，用它的人幾乎都是用全方案的。

3. 效率

效率也分兩種，一種是開發效率，一種是運行效率。

咱們前面提到，組件化，這是提高開發效率的一種手段，在組件化這個點上，各路框架的組織方式大同小異，反正最終都是組件樹。具體到單個組件的實現上，我我的是傾向於MVVM流的，以前作過對比，MVVM系的代碼量會少一些，開發效率稍高一點。

其中，Angular由於實現的特殊性，有做用域繼承之類的雙刃劍黑魔法，開發效率的不穩定因素要高很多，深入理解的人用起來效率很高，不理解的用了處處是坑。

再看運行效率，這裏面，Angular是較低的那個，主要在於數據變動檢測方式，但這也不是絕對的，在部分場景下，髒檢測未必就沒有優點，這個記得@鄭海波論述過。

運行效率的另一面主要是建立和修改DOM，在建立上，你們是沒有太大差別的，而在修改DOM的時候，React獨創的虛擬DOM有很大優點，因此其餘框架內部實現也在逐漸借鑑。

若是看到這裏，極可能你會疑惑，題目問的明明是學哪一個好，我說這些是什麼意思？

我用這些篇幅說明了Web應用的業務開發中存在哪些麻煩，每種技術又是來解決什麼痛點的，這樣，你能夠按照本身的需求去，結合業務場景進行分析，而後選擇須要的挨個學下去。

其實學API之類的很快，仍是要把本身業務中的難點想清楚，帶着問題去學，帶着需求去學，學思想重於學使用，必定能事半功倍。

引用尤雨溪的話：

想要只學一個一勞永逸，那是不可能的。好好打基礎，而後多嘗試不一樣風格的框架，由於只有嘗試事後才能理解好比@徐飛提到的各類權衡，也只有嘗試事後才能知道哪一個能真正提高本身的開發效率。說沒精力，那是藉口。

跟你們共勉一句話：

對不少人來講，技術都不是一輩子的職業導向，那麼，提高本身的眼界，站在更高的角度思考問題就顯得尤其重要，從本身，到團隊，公司，再到整個業界，眼界寬廣了，技術也就是你的左膀右臂。——陳韜