vue和react的區別及優缺點是什么

這篇文章主要講解了“vue和react的區別及優缺點是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue和react的區別及優缺點是什么”吧！

vue和react的區別及優缺點

共同點

• 數據驅動視圖

• 組件化

• 都使用 Virtual DOM

1.數據驅動視圖

在jquery時代，我們需要頻繁的操作DOM來實現頁面效果與交互；而Vue和React解決了這一痛點，采用數據驅動視圖方式，隱藏操作DOM的頻繁操作。

所以我們在開發時，只需要關注數據變化即可，但是二者實現方式不盡相同。

2.組件化

React與Vue都遵循組件化思想，它們把注意力放在UI層，將頁面分成一些細塊，這些塊就是組件，組件之間的組合嵌套就形成最后的網頁界面。

所以在開發時都有相同的套路，比如都有父子組件傳遞，都有數據狀態管理、前端路由、插槽等。

3.Virtual DOM

Vue與React都使用了 Virtual DOM + Diff算法，不管是Vue的Template模板+options api寫法，還是React的Class或者Function寫法，最后都是生成render函數，而render函數執行返回VNode(虛擬DOM的數據結構，本質上是顆樹)。

當每一次UI更新時，總會根據render重新生成最新的VNode，然后跟以前緩存起來老的VNode進行對比，再使用Diff算法（框架核心）去真正更新真實DOM（虛擬DOM是js對象結構，同樣在js引擎中，而真實DOM在瀏覽器渲染引擎中，所以操作虛擬DOM比操作真實DOM開銷要小得多）。

不同點

Vue和React兩者雖然都是用于構建用戶界面的框架，但是也有很大的差異，首先二者核心的思想就不同。

1.核心思想不同

Vue開發的定位就是盡可能的降低前端開發的門檻，讓更多的人能夠更快地上手開發。這就有了vue地主要特點：靈活易用地漸進式框架，進行數據攔截/代理，它對偵測數據地變化更加敏感、更精準。

React從一開始地定位就是提出UI開發的新思路。背靠大公司Facebook的React，從開始起就不缺關注和用戶，而且React想要做的是用更好的方式去顛覆前端開發方式。所以React推崇函數式編程（純組件），數據不可變以及單向數據流，當然需要雙向的地方也可以手動實現，比如借助onChange和setState來實現。

由于兩者核心思想的不同，所以導致Vue和React在后續設計產生了許多差異。

2.組件寫法差異

React推薦的做法是JSX + inline style，也就是把 HTML 和 CSS 全部寫進 javascript中，即all in js；Vue推薦的做法是 template 的單文件組件格式（簡單易懂，從傳統前端轉過來易于理解），即 html，css，js寫在同一個文件（vue也支持JSX寫法）。這個差異一定程度上也是由于二者核心思想不同而導致的。

3.diff算法不同

傳統diff算法是循環遞歸每一個節點。將兩棵樹中所有的節點一一對比需要O(n²)的復雜度，在對比過程中發現舊節點在新的樹中未找到，那么就需要把舊節點刪除，刪除一棵樹的一個節點（找到一個合適的節點放到被刪除的位置）的時間復雜度為O(n)，同理添加新節點的復雜度也是O(n)，合起來diff兩棵樹的復雜度就是O(n³)。傳統Diff算法復雜度太高，vue2.x加入了 Virtual Dom 和react擁有相同的diff優化原則（將算法復雜度降為O(n)）。

兩者流程思路上是類似的：

不同的組件產生不同的DOM結構。當style不相同時，對應DOM操作就是直接銷毀老的DOM，創建新的DOM。同一層次的一組子節點，可以通過唯一的key區分。

React的Diff算法核心實現

react首先對新集合進行遍歷，for(name in nextChildren)，通過唯一的key來判斷老集合中是否存在相同的節點。如果沒有的話就創建，如果有的話，if(preChild === nextChild)會將節點在新集合中的位置和老集合中lastIndex進行比較，如果 if(child._mountIndex < lastIndex)進行移動操作，否則不進行移動操作。如果遍歷的過程中，發現在新集合中沒有，但在老集合中有的節點，會進行刪除操作。

vue的Diff算法核心實現

updateChildren是vue diff的核心，過程可以概括為：

舊children和新children各有兩個頭尾的變量StartIdx和EndIdx，它們的兩個變量相互比較，一共有四種比較方式。如果四種方式都沒匹配，如果設置了key，就會用key進行比較，在比較的過程中，變量會往中間靠，一旦StartIdx > EndIdx表明舊children和新children至少有一個已經遍歷完了，就會結束比較。

Vue2的核心Diff算法采用了雙端比較的算法，同時從新舊children的兩端開始進行比較 ，借助key值找到可復用的節點，再進行相關操作。相比React的Diff算法，同樣情況下可以減少移動節點次數，減少不必要的性能損耗，更加的優雅。

4.響應式原理不同

Vue：

• Vue依賴收集，自動優化，數據可變。

• Vue遞歸監聽data的所有屬性，直接修改。

• 當數據改變時，自動找到引用組件重新渲染。

React：

• React基于狀態機，手動優化，數據不可變，需要setState驅動新的state替換老的state。當數據改變時，以組件為根目錄，默認全部重新渲染，所以React中會需要 shouldComponentUpdate這個生命周期函數方法來進行控制

5.其他不同點

除了上面的四個不同點外，細數還有很多不同點的。比如api的差異也挺大的，Vue為了更加簡單易用，引入了指令、filter等概念以及大量的option API，比如 watch、computed等都是非常好用的。

而React得API比較少，如果你的javascript基礎比較好，上手也是非常容易的。

react和vue哪個比較受歡迎，以后主流應該是哪個方向？

react是在全球或者說是國際上影響力巨大，尤其是19年推出reacthooks方式具有里程碑意義。

而vue呢具體應該是發展迅速，尤其是是在國內占有巨大的用戶群體，框架是學不完的，所以說還是打好原生的基礎。推薦可以看看掘金。

Vue和React那個更好？

兩個框架各有優點，整體來說React更成熟。

• 1.VUE主要用模板搭建應用，React要求開發者借助JSX創建DOM。

• 2.VUE簡單上手，中小型項目更適合，大型應用選React。

• 3.ReactNative更適合原生APP的框架，如果是多端開發，應選擇React。

為什么react還比vue火

優勢:react前景更好。

并不是說Vue的缺陷，而是想說:使用Vue上手太容易，導致一開始搞前端的人一下子就能看著中文文檔搞出SPA，容易產生自信，忽略對周邊類庫的關注，缺乏對Vue進行貢獻的能力。

雖然用戶群體多，但有能力進行改造開發或集成其他模塊的人并不多，大多屬于使用群體，其生態更多的只能依賴尤大，可以想見Vue生態的發展速度不會很快，下次出現更有用的亮點也很可能不會在Vue。

Reduxmobx類數據流管理也先在react上出現，有無數真正樂于開發研究貢獻的人在react社區，改進react，增強。react社區才是真正意義上的火。

性能方面我不好定奪，各有優劣開發難度Vue確實簡單些維護性差不多react也不是上手成本高，只是想要自己從頭構建工程成本高，但并不是一定要自己做，react社區一堆一鍵安裝的工程，只不過不會出現在官網或文檔中，造成大部分國人不知道怎么上手。

感謝各位的閱讀，以上就是“vue和react的區別及優缺點是什么”的內容了，經過本文的學習后，相信大家對vue和react的區別及優缺點是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！