React 和 Vue 的不同程式設計模型

1、vue 的程式設計模型

2、react 的程式設計模型

3、兩個框架的不同理念

接觸 vue 的開發者應該都知道，在 vue 中一旦內部資料改變了，檢視就會隨之更新，這是因為 vue 的資料響應式原理：vue 對其構造選項 options 的 data 中的資料進行了篡改並監聽，一旦監聽資料發生變化，vue 就會去重新整理檢視。

在 vue 的程式設計模型中，乙個資料物件對應乙個虛擬 dom 節點，當物件的屬性改變時，vue 就會將相關的 dom 節點全部更新。

由於 react 沒有像 vue 一樣，對其內部資料 state 進行監聽，這就使得 react 不知道其內部資料什麼時候改變了，只有開發人員知道，所以需要開發人員在改變 state 資料時呼叫 setstate() 或 setn() 去非同步重新整理檢視。

而且 react 提倡的時資料不可變理念，當開發人員需要改變內部資料 state 時，不建議修改舊的 state，而是宣告新的 state 將舊的 state 進行覆蓋。

在 react 的程式設計模型，乙個物件對應乙個虛擬dom，另乙個物件，對應另乙個虛擬 dom。對比兩個虛擬dom，找不同（dom diff），最後區域性更新dom

react 的理念是資料不可變，它會通過 setn() 宣告新資料，而 vue 的理念是資料響應式，它提倡改變原資料。