react是facebook建立的框架，它推廣了虛擬dom和新的js語法----jsx，在2013年5月份進行開源，React 是一個用於構建使用者介面的 JAVASCRIPT 庫。React主要用於構建UI，很多人認為 React 是 MVC 中的 V（檢視）
react的特點
- 宣告式設計 −React採用宣告正規化，可以輕鬆描述應用。
- 高效 −React通過對DOM的模擬（虛擬dom），最大限度地減少與DOM的互動。
- 靈活 −React可以與已知的庫或框架很好地配合。
- JSX − JSX 是 JavaScript 語法的擴充套件。
- 元件 − 通過 React 構建元件，使得程式碼更加容易得到複用，能夠很好的應用在大專案的開發中
- 單向響應的資料流 − React 實現了單向響應的資料流，從而減少了重複程式碼，這也是它為什麼比傳統資料繫結更簡單。
Vue作者尤雨溪 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
vue的特點
MVVM框架、雙向資料繫結原理，資料驅動、元件化、輕量、簡潔、高效、模組友好
Virtual DoM
虛擬dom是一個什麼概念呢
Vue.js(2.x)與React的其中最大一個相似之處，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual DOM基本上說就是它名字的意思：虛擬DOM。
DOM樹的虛擬表現。它的誕生是基於這麼一個概念：改變真實的DOM狀態遠比改變一個JavaScript物件的花銷要大得多。
Virtual DOM是一個對映真實DOM的JavaScript物件，如果需要改變任何元素的狀態，那麼是先在Virtual DOM上進行改變，而不是直接改變真實的DOM。當有變化產生時，一個新的Virtual DOM物件會被建立並計算新舊Virtual DOM之間的差別。之後這些差別會應用在真實的DOM上。
react的渲染流程
babel轉換工具地址：babeljs.io/repl/
1. react中 我們用jsx來寫元件，它會被babel轉換成純js，然後Preact的h函式會將這段js轉換成DOM樹，最後Preact的Virtual DOM演算法會將virtual DOM轉換成真實的DOM樹，來構建我們的應用。
2. 真實的Virtual DOM會比上面的例子更復雜，但它本質上是一個巢狀著陣列的原生物件。當新一項被加進去這個JavaScript物件時，一個函式會計算新舊Virtual DOM之間的差異並反應在真實的DOM上。計算差異的演算法是高效能框架的祕密所在。
解析流程概覽圖
React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果做髒檢查。
vue的渲染流程
Vue宣稱可以更快地計算出Virtual DOM的差異，這是由於它在渲染過程中，會跟蹤每一個元件的依賴關係，不需要重新渲染整個元件樹。
流程示例圖
#####1. Vue的編譯器在編譯模板之後，會把這些模板編譯成一個渲染函式。而函式被呼叫的時候就會渲染並且返回一個虛擬DOM的樹。這個樹非常輕量，它的職責就是描述當前介面所應處的狀態。
2. 當我們有了這個虛擬的樹之後，再交給一個patch函式，負責把這些虛擬DOM真正施加到真實的DOM上。在這個過程中，Vue有自身的響應式系統來偵測在渲染過程中所依賴到的資料來源。
3. 在渲染過程中，偵測到的資料來源之後，之後就可以精確感知資料來源的變動。到時候就可以根據需要重新進行渲染。
4. 當重新進行渲染之後，會生成一個新的樹，將新樹與舊樹進行對比，就可以最終得出應施加到真實DOM上的改動。最後再通過patch函式施加改動。
要點可以概括為
-
當某個資料屬性被用到時，觸發 getter，這個屬性就會被作為依賴被 watcher 記錄下來。
-
整個函式被渲染完的時候，每一個被用到的資料屬性都會被記錄。
-
相應的資料變動時，例如給它一個新的值，就會觸發 setter，通知資料物件對應資料有變化。
-
此時會通知對應的元件，其資料依賴有所改動，需要重新渲染。
-
對應的元件再次調動渲染函式，生成 Virtual DOM，實現 DOM 更新。
兩者相比
react和vue的相似之處：
1.使用虛擬dom
2.提供了響應式和元件化的檢視元件
3.關注核心庫，伴隨於此，有配套的路由和負責處理全域性狀態管理的庫
vue的優勢：
- API設計上簡單，語法簡單，學習成本低
- 基於依賴追蹤的觀察系統，並且非同步佇列更新
- 簡單的語法及專案搭建 ，更快的渲染速度和更小的體積
- 渲染效能
渲染使用者介面的時候，dom的操作成本是最高的，那為了儘可能的減少對dom的操作，Vue和React都利用虛擬DOM來實現這一點，但Vue的Virtual DOM實現（一個陷阱的叉子）的權重要輕得多，因此比React的引入開銷更少。
Vue 和 React 也提供功能性元件，這些元件因為都是沒有宣告，沒有例項化的，因此會花費更少的開銷。當這些都用於關鍵效能的場景時，Vue 將會更快。
5.更新效能
在react中，當一個元件的狀態發生變化時，它將會引起整個元件的子樹都進行重新渲染，從這個元件的根部開始。那為了避免子元件不必要的重新渲染，您需要隨時使用shouldComponentUpdate，並使用不可變的資料結構。 在Vue中，元件的依賴關係在它的渲染期間被自動跟蹤，因此係統準確地知道哪些元件實際上需要重新渲染。這就意味著在更新方面,vue也是快於React
6.開發中
在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。這是由於 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示資訊。vue在實現這些檢查時，也更加密切地關注了效能方面。
react的優勢
- 更適合大型應用和更好的可測試性
- Web端和移動端原生APP通吃
- 更大的生態系統，更多的支援和好用的工具（搭配的router和redux以及其中介軟體包含了很多重要的思想）
- 比較適合中大型專案（便於測試和後續除錯）
- 是一種在記憶體中描述dom數狀態的資料結構
- 支援在服務端渲染
之前有些過一篇關於vue雙向資料繫結原理的文章，簡易版的vue渲染資料，更新資料的流程（www.jianshu.com/p/8c0bda402…