正如我們之前提到的迹炼，WordPress 的核心團(tuán)隊(duì)正爭論著為應(yīng)該將哪款（前端框架）加入現(xiàn)在的架構(gòu)之中砸彬。目前看來，暫時(shí)脫穎而出的是React與Vue.js斯入，社區(qū)中的很多成員正權(quán)衡著這兩款框架的利弊砂碉。
那到底哪款框架會(huì)勝出，哪款框架又會(huì)淪為昔日的prototype.js.呢刻两？讓我們一起看看吧绽淘。
簡單介紹
除非你最近一直不關(guān)注前端的發(fā)展，不然你肯定聽說過由Facebook創(chuàng)建的JavaScript UI框架——React闹伪。它支撐著包括Instagram在內(nèi)的大多數(shù)Facebook網(wǎng)站沪铭。React與當(dāng)時(shí)流行的jQuery,Backbone.js和Angular 1等框架不同，它的誕生改變了JavaScript的世界偏瓤。其中最大的變化是React推廣了Virtual DOM（我們稍后探究）并創(chuàng)造了新的語法——JSX杀怠，JSX允許開發(fā)者在JavaScrit中書寫HTML（譯者注：即HTML in JavaScript）。WAT?
Vue致力解決的問題與React一致厅克，但卻提供了另外一套解決方案赔退。Vue使用模板系統(tǒng)而不是JSX，使其對(duì)現(xiàn)有應(yīng)用的升級(jí)更加容易证舟。這是因?yàn)槟０逵玫木褪瞧胀ǖ腍TML硕旗，通過Vue來整合現(xiàn)有的系統(tǒng)是比較容易的，不需要整體重構(gòu)女责。同時(shí)Vue聲稱它更容易學(xué)習(xí)漆枚，我最近才接觸Vue，能證明所言非虛抵知。關(guān)于Vue還需要說的是墙基，Vue主要是由一位開發(fā)者進(jìn)行維護(hù)的软族，而不像React一樣由如Facebook這類大公司維護(hù)。
相似之處
React與Vue存在很多相似之處残制，例如他們都是JavaScript的UI框架立砸，專注于創(chuàng)造前端的富應(yīng)用。不同于早期的JavaScript框架“功能齊全”初茶，Reat與Vue只有框架的骨架颗祝，其他的功能如路由、狀態(tài)管理等是框架分離的組件恼布。
Virtual DOM
啊哈吐葵，人們經(jīng)常說Virtual DOM是什么呢？
Vue.js(2.0版本)與React的其中最大一個(gè)相似之處桥氏，就是他們都使用了一種叫’Virtual DOM’的東西。所謂的Virtual DOM基本上說就是它名字的意思：虛擬DOM猛铅，DOM樹的虛擬表現(xiàn)字支。它的誕生是基于這么一個(gè)概念：改變真實(shí)的DOM狀態(tài)遠(yuǎn)比改變一個(gè)JavaScript對(duì)象的花銷要大得多。
Virtual DOM是一個(gè)映射真實(shí)DOM的JavaScript對(duì)象奸忽，如果需要改變?nèi)魏卧氐臓顟B(tài)堕伪，那么是先在Virtual DOM上進(jìn)行改變，而不是直接改變真實(shí)的DOM栗菜。當(dāng)有變化產(chǎn)生時(shí)欠雌，一個(gè)新的Virtual DOM對(duì)象會(huì)被創(chuàng)建并計(jì)算新舊Virtual DOM之間的差別。之后這些差別會(huì)應(yīng)用在真實(shí)的DOM上疙筹。
例子如下富俄，我們可以看看下面這個(gè)列表在HTML中的代碼是如何寫的：
而在JavaScript中，我們可以用對(duì)象簡單地創(chuàng)造一個(gè)針對(duì)上面例子的映射：
真實(shí)的Virtual DOM會(huì)比上面的例子更復(fù)雜而咆，但它本質(zhì)上是一個(gè)嵌套著數(shù)組的原生對(duì)象霍比。
當(dāng)新一項(xiàng)被加進(jìn)去這個(gè)JavaScript對(duì)象時(shí)，一個(gè)函數(shù)會(huì)計(jì)算新舊Virtual DOM之間的差異并反應(yīng)在真實(shí)的DOM上暴备。計(jì)算差異的算法是高性能框架的秘密所在悠瞬，React和Vue在實(shí)現(xiàn)上有點(diǎn)不同。
Vue宣稱可以更快地計(jì)算出Virtual DOM的差異涯捻，這是由于它在渲染過程中浅妆，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹障癌。?
而對(duì)于React而言凌外，每當(dāng)應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染涛浙。當(dāng)然趴乡，這可以通過shouldComponentUpdate這個(gè)生命周期方法來進(jìn)行控制对省，但Vue將此視為默認(rèn)的優(yōu)化。
小結(jié)：如果你的應(yīng)用中晾捏，交互復(fù)雜蒿涎，需要處理大量的UI變化，那么使用Virtual DOM是一個(gè)好主意惦辛。如果你更新元素并不頻繁劳秋，那么Virtual DOM并不一定適用，性能很可能還不如直接操控DOM胖齐。
組件化
React與Vue都鼓勵(lì)組件化應(yīng)用玻淑。這本質(zhì)上說，是建議你將你的應(yīng)用分拆成一個(gè)個(gè)功能明確的模塊呀伙，每個(gè)模塊之間可以通過合適的方式互相聯(lián)系补履。關(guān)于組件化的例子可以在這篇文章的中間部分被找到:
你可以認(rèn)為組件就是用戶界面中的一小塊。如果讓我來設(shè)計(jì)Facebook的UI界面剿另，那么聊天窗口會(huì)是一個(gè)組件箫锤，評(píng)論會(huì)是另一個(gè)組件，不斷更新的好友列表也會(huì)作為一個(gè)組件雨女。
在Vue中谚攒，如果你遵守一定的規(guī)則，你可以使用單文件組件.
正如上面你看到的例子中氛堕，HTML, JavaScript和CSS都寫在一個(gè)文件之中馏臭。你不再需要在.vue組件文件中引入CSS，雖然這也是可以的讼稚。
React也是非常相似的括儒，JavaScript與JSX被寫入同一個(gè)組件文件中。
Props
在上面兩個(gè)例子中锐想，我們可以看到React和Vue都有’props’的概念塑崖，這是properties的簡寫。props在組件中是一個(gè)特殊的屬性痛倚，允許父組件往子組件傳送數(shù)據(jù)规婆。
在React中，這是必須的蝉稳，它依賴一個(gè)“單一數(shù)據(jù)源”作為它的“狀態(tài)”（稍后有更多介紹）抒蚜。
而在Vue中，props略有不同耘戚。它們一樣是在組件中被定義嗡髓，但Vue依賴于模板語法，你可以通過模板的循環(huán)函數(shù)更高效地展示傳入的數(shù)據(jù)收津。
主要區(qū)別
Vue與react有很多的相似之處饿这，但他們也有完全不一致的地方浊伙。
模板 vs JSX
React與Vue最大的不同是模板的編寫。Vue鼓勵(lì)你去寫近似常規(guī)HTML的模板长捧。寫起來很接近標(biāo)準(zhǔn)HTML元素嚣鄙，只是多了一些屬性。
這些屬性也可以被使用在單文件組件中串结，盡管它需要在在構(gòu)建時(shí)將組件轉(zhuǎn)換為合法的JavaScript和HTML哑子。
Vue鼓勵(lì)你去使用HTML模板去進(jìn)行渲染，使用相似于Angular風(fēng)格的方法去輸出動(dòng)態(tài)的內(nèi)容肌割。因此卧蜓，通過把原有的模板整合成新的Vue模板，Vue很容易提供舊的應(yīng)用的升級(jí)把敞。這也讓新來者很容易適應(yīng)它的語法弥奸。
另一方面，React推薦你所有的模板通用Java的語法擴(kuò)展——JSX書寫奋早。同樣的代碼盛霎，用JSX書寫的例子如下：
React/JSX乍看之下，覺得非常啰嗦伸蚯，但使用JavaScript而不是模板來開發(fā)，賦予了開發(fā)者許多編程能力简烤。
但請(qǐng)記准劣省：
能力越大，責(zé)任越大横侦。Ben Parker
JSX只是JavaScript混合著XML語法挥萌，然而一旦你掌握了它，它使用起來會(huì)讓你感到暢快枉侧。這可能只是我個(gè)人的意見引瀑，但我覺得這比Angular 1風(fēng)格的屬性好多了，Angular 1真的難以忍受榨馁。
而相反的觀點(diǎn)是Vue的模板語法去除了往視圖/組件中添加邏輯的誘惑憨栽，保持了關(guān)注點(diǎn)分離。
值得一提的是昼接，與React一樣送火，Vue在技術(shù)上也支持render函數(shù)和JSX饲漾，但只是不是默認(rèn)的而已。
狀態(tài)管理 vs 對(duì)象屬性
如果你對(duì)React熟悉掸宛，你就會(huì)知道應(yīng)用中的狀態(tài)是（React）關(guān)鍵的概念。也有一些配套框架被設(shè)計(jì)為管理一個(gè)大的state對(duì)象招拙，如Redux唧瘾。此外措译，state對(duì)象在React應(yīng)用中是不可變的，意味著它不能被直接改變（這也許不一定正確）饰序。在React中你需要使用setState()方法去更新狀態(tài)领虹。
在Vue中，state對(duì)象并不是必須的菌羽，數(shù)據(jù)由data屬性在Vue對(duì)象中進(jìn)行管理掠械。
而在Vue中，則不需要使用如setState()之類的方法去改變它的狀態(tài)注祖，在Vue對(duì)象中猾蒂，data參數(shù)就是應(yīng)用中數(shù)據(jù)的保存者。
對(duì)于管理大型應(yīng)用中的狀態(tài)這一話題而言是晨，Vue.js的作者尤雨溪曾說夠肚菠，（Vue的）解決方案適用于小型應(yīng)用，但對(duì)于對(duì)于大型應(yīng)用而言不太適合罩缴。
多數(shù)情況下蚊逢，框架內(nèi)置的狀態(tài)管理是不足以支撐大型應(yīng)用的，Redux或Vuex等狀態(tài)管理方案是必須使用的箫章。
有鑒于此烙荷，爭論你的應(yīng)用中如何管理狀態(tài)很可能屬于過早優(yōu)化，并且這很可能只是個(gè)人偏好問題檬寂。此外终抽，你可能真沒必要擔(dān)心這些方面。
那么桶至，誰贏得這場競賽呢?
如果你想在求職市場中有光輝的JavaScript UI框架使用經(jīng)驗(yàn)昼伴，那么React和Vue都是不錯(cuò)的選擇。React似乎更加流行镣屹，但Vue也變得越來越廣為人知圃郊。如果你想將現(xiàn)有的應(yīng)用升級(jí)為新的JavaScript框架，那么我建議你選擇Vue女蜈。實(shí)際上持舆，當(dāng)你想創(chuàng)建一個(gè)現(xiàn)代的JavaScript應(yīng)用時(shí)，兩者都是很好的選擇伪窖，取決于你的偏好吏廉。筆者作為一個(gè)情懷的程序員，支持Vue一波惰许！
