react是facebook創(chuàng)建的框架，它推廣了虛擬dom和新的js語法----jsx谣蠢，在2013年5月份進行開源粟耻，React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。React主要用于構(gòu)建UI眉踱，很多人認為 React 是 MVC 中的 V（視圖）

react的特點

1. 聲明式設(shè)計 ?React采用聲明范式挤忙，可以輕松描述應(yīng)用。
2. 高效 ?React通過對DOM的模擬（虛擬dom）谈喳，最大限度地減少與DOM的交互册烈。
3. 靈活 ?React可以與已知的庫或框架很好地配合。
4. JSX ? JSX 是 JavaScript 語法的擴展婿禽。
5. 組件 ? 通過 React 構(gòu)建組件赏僧，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項目的開發(fā)中
6. 單向響應(yīng)的數(shù)據(jù)流 ? React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流谈宛，從而減少了重復(fù)代碼次哈，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

Vue作者尤雨溪 是一套用于構(gòu)建用戶界面的漸進式框架吆录。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用琼牧。Vue 的核心庫只關(guān)注視圖層恢筝，不僅易于上手哀卫，還便于與第三方庫或既有項目整合。另一方面撬槽，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時此改，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

vue的特點

MVVM框架侄柔、雙向數(shù)據(jù)綁定原理共啃，數(shù)據(jù)驅(qū)動、組件化暂题、輕量移剪、簡潔、高效薪者、模塊友好

Virtual DoM

虛擬dom是一個什么概念呢

image

Vue.js(2.x)與React的其中最大一個相似之處纵苛，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual DOM基本上說就是它名字的意思：虛擬DOM言津。

DOM樹的虛擬表現(xiàn)攻人。它的誕生是基于這么一個概念：改變真實的DOM狀態(tài)遠比改變一個JavaScript對象的花銷要大得多。

Virtual DOM是一個映射真實DOM的JavaScript對象悬槽，如果需要改變?nèi)魏卧氐臓顟B(tài)怀吻，那么是先在Virtual DOM上進行改變，而不是直接改變真實的DOM初婆。當有變化產(chǎn)生時蓬坡，一個新的Virtual DOM對象會被創(chuàng)建并計算新舊Virtual DOM之間的差別。之后這些差別會應(yīng)用在真實的DOM上烟逊。

react的渲染流程

babel轉(zhuǎn)換工具地址：http://babeljs.io/repl/

1. react中 我們用jsx來寫組件渣窜，它會被babel轉(zhuǎn)換成純js，然后Preact的h函數(shù)會將這段js轉(zhuǎn)換成DOM樹宪躯，最后Preact的Virtual DOM算法會將virtual DOM轉(zhuǎn)換成真實的DOM樹乔宿，來構(gòu)建我們的應(yīng)用。

2. 真實的Virtual DOM會比上面的例子更復(fù)雜访雪，但它本質(zhì)上是一個嵌套著數(shù)組的原生對象详瑞。當新一項被加進去這個JavaScript對象時，一個函數(shù)會計算新舊Virtual DOM之間的差異并反應(yīng)在真實的DOM上臣缀。計算差異的算法是高性能框架的秘密所在坝橡。

image

解析流程概覽圖

image

React依賴Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM會對渲染出來的結(jié)果做臟檢查精置。

vue的渲染流程

Vue宣稱可以更快地計算出Virtual DOM的差異计寇，這是由于它在渲染過程中，會跟蹤每一個組件的依賴關(guān)系，不需要重新渲染整個組件樹番宁。

流程示例圖

image

1. Vue的編譯器在編譯模板之后元莫，會把這些模板編譯成一個渲染函數(shù)。而函數(shù)被調(diào)用的時候就會渲染并且返回一個虛擬DOM的樹蝶押。這個樹非常輕量踱蠢，它的職責就是描述當前界面所應(yīng)處的狀態(tài)。

2. 當我們有了這個虛擬的樹之后棋电，再交給一個patch函數(shù)茎截，負責把這些虛擬DOM真正施加到真實的DOM上。在這個過程中赶盔，Vue有自身的響應(yīng)式系統(tǒng)來偵測在渲染過程中所依賴到的數(shù)據(jù)來源企锌。

3. 在渲染過程中，偵測到的數(shù)據(jù)來源之后招刨，之后就可以精確感知數(shù)據(jù)源的變動霎俩。到時候就可以根據(jù)需要重新進行渲染。

4. 當重新進行渲染之后沉眶，會生成一個新的樹打却，將新樹與舊樹進行對比，就可以最終得出應(yīng)施加到真實DOM上的改動谎倔。最后再通過patch函數(shù)施加改動柳击。

要點可以概括為

• 當某個數(shù)據(jù)屬性被用到時，觸發(fā) getter片习，這個屬性就會被作為依賴被 watcher 記錄下來捌肴。

• 整個函數(shù)被渲染完的時候，每一個被用到的數(shù)據(jù)屬性都會被記錄藕咏。

• 相應(yīng)的數(shù)據(jù)變動時状知，例如給它一個新的值，就會觸發(fā) setter孽查，通知數(shù)據(jù)對象對應(yīng)數(shù)據(jù)有變化饥悴。

• 此時會通知對應(yīng)的組件，其數(shù)據(jù)依賴有所改動盲再，需要重新渲染西设。

• 對應(yīng)的組件再次調(diào)動渲染函數(shù)，生成 Virtual DOM答朋，實現(xiàn) DOM 更新贷揽。

兩者相比

react和vue的相似之處：

1.使用虛擬dom

2.提供了響應(yīng)式和組件化的視圖組件

3.關(guān)注核心庫，伴隨于此梦碗，有配套的路由和負責處理全局狀態(tài)管理的庫

vue的優(yōu)勢：

1. API設(shè)計上簡單禽绪，語法簡單蓖救，學習成本低
2. 基于依賴追蹤的觀察系統(tǒng)，并且異步隊列更新
3. 簡單的語法及項目搭建 丐一，更快的渲染速度和更小的體積
4. 渲染性能

渲染用戶界面的時候藻糖，dom的操作成本是最高的淹冰，那為了盡可能的減少對dom的操作库车，Vue和React都利用虛擬DOM來實現(xiàn)這一點，但Vue的Virtual DOM實現(xiàn)（一個陷阱的叉子）的權(quán)重要輕得多樱拴，因此比React的引入開銷更少柠衍。

Vue 和 React 也提供功能性組件，這些組件因為都是沒有聲明晶乔，沒有實例化的珍坊，因此會花費更少的開銷。當這些都用于關(guān)鍵性能的場景時正罢，Vue 將會更快阵漏。

5.更新性能

在react中，當一個組件的狀態(tài)發(fā)生變化時翻具，它將會引起整個組件的子樹都進行重新渲染履怯，從這個組件的根部開始。那為了避免子組件不必要的重新渲染裆泳，您需要隨時使用shouldComponentUpdate叹洲，并使用不可變的數(shù)據(jù)結(jié)構(gòu)。 在Vue中工禾，組件的依賴關(guān)系在它的渲染期間被自動跟蹤运提，因此系統(tǒng)準確地知道哪些組件實際上需要重新渲染。這就意味著在更新方面,vue也是快于React

6.開發(fā)中

在開發(fā)中闻葵，Vue 每秒最高處理 10 幀民泵，而 React 每秒最高處理不到 1 幀。這是由于 React 有大量的檢查機制槽畔，這會讓它提供許多有用的警告和錯誤提示信息栈妆。vue在實現(xiàn)這些檢查時，也更加密切地關(guān)注了性能方面竟痰。

react的優(yōu)勢

• 更適合大型應(yīng)用和更好的可測試性
• Web端和移動端原生APP通吃
• 更大的生態(tài)系統(tǒng)签钩，更多的支持和好用的工具（搭配的router和redux以及其中間件包含了很多重要的思想）
• 比較適合中大型項目（便于測試和后續(xù)調(diào)試）
• 是一種在內(nèi)存中描述dom數(shù)狀態(tài)的數(shù)據(jù)結(jié)構(gòu)
• 支持在服務(wù)端渲染

之前有些過一篇關(guān)于vue雙向數(shù)據(jù)綁定原理的文章，簡易版的vue渲染數(shù)據(jù)坏快，更新數(shù)據(jù)的流程（http://www.reibang.com/p/8c0bda402f78）