react和vue——比較

相同點：

　　1.JavaScript的UI框架。專注於創造前端的富應用。

　　2.都有虛擬DOM，DOM樹的虛擬表現------改變真實的DOM狀態比改變一個JavaScript對象的花銷要大得多。

　　　　Virtual Dom是一個映射真實DOM的JavaScript對象，如果需要改變任何元素的狀態，那么是先在Virtual DOM上進行改變，而不是直接改變真實的DOM。

　　　　當有變化產生時，一個新的Virtual DOM對象會被創建並計算新舊Virtual DOM之間的差別。之后這些差別會應用在真實的DOM上。

　　3.組件化應用，將應用分拆成一個個功能明確的模塊，每個模塊之間可以通過合適的方式互相聯系

　　4.Props：允許父組件向子組件傳遞數據

<ul class="list">
  <li>item 1</li>
  <li>item 2</li>
</ul>

{
    type: 'ul', 
    props: {'class': 'list'}, 
    children: [
        { type: 'li', props: {}, children: ['item 1'] },
        { type: 'li', props: {}, children: ['item 2'] }
    ]
}

不同點：

　　1.模板 vs JSX

　　　　react的思路是all in js，通過js生成html

　　　　vue是把html、css、js組合到一起，用各自的處理方式，通過模板引擎來處理。

　　2.狀態管理 vs  對象屬性

　　3.類式的組件寫法，還是聲明式的寫法

　　　　react是類式寫法，api很少

　　　　

　　　　vue是聲明式的寫法，通過傳入各種的options，api和參數都很多。

　　　　

 

　　react可以通過高階組件來擴展，而vue需要通過mixins來擴展

　　

image.png

 

 

image.png

vue的mixin的例子：

 

image.png

 

 

 

　　4.實現Virtual  DOM 的算法不一樣

　　　　react中數據發生變化（調用setState時），render函數就會執行，重新生成新的虛擬DOM，這個虛擬DOM和舊的虛擬DOM做比較（遍歷當前組件所有的子節點子組件-fiber）得出差異然后渲染

　　　　vue組件響應式思想，采用代理監聽數據，（由於數據變化觸發setter，組件中數據的getter收集了依賴）在某個組件里修改數據，就會明確知道哪個組件產生了變化，只用diff這個組件就可以了

　　5.設計思路不同

　　　1》數據是不是可變的

　　　　　　react整體是函數式思想，把組件設計成純組件，狀態和邏輯通過參數傳入，所以在react中，是單項數據流，推崇結合immutable來實現數據不可變，react在setState之后，會重現走渲染的流程，如果shouldComponentUpdate返回的是true，就繼續渲染，如果返回false，就不會重新渲染，PureComponent就是重寫了shouldComponentUpdate，然后再里面作了props和state淺層對比。　　

　　　　

 

　　　vue的思想是響應式的，也是基於數據可變的。通過對每一個屬性建立Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom

 

　　react的性能優化需要手動去做，而vue的性能優化是自動的，但是vue的響應式機制也有問題，當state特別多的時候，Watcher也會很多，會導致卡頓，所以大型應用（狀態特別多）一般使用react，更加可控。

　　

4.什么功能內置，什么交給社區去做

react做的事情很少，很多都交給社區去做，vue很多東西都是內置的，寫起來確實方便一些，
比如 redux的combineReducer就對應vuex的modules，
比如reselect就對應vuex的getter和vue組件的computed，
vuex的mutation是直接改變的原始數據，而redux的reducer是返回一個全新的state，所以redux結合immutable來優化性能，vue不需要。