今晚我們來搞一搞Vue和React的對比好吧，話不多說今天我們直接開搞可好硼身，各位小老板硅急，開始吧
1.?react整體是函數(shù)式的思想，把組件設(shè)計(jì)成純組件佳遂，狀態(tài)和邏輯通過參數(shù)傳入营袜， 所以在react中，是單向數(shù)據(jù)流丑罪，推崇結(jié)合immutable來實(shí)現(xiàn)數(shù)據(jù)不可變荚板。 react在setState之后會(huì)重新走渲染的流程，如果shouldComponentUpdate返回的是true吩屹，就繼續(xù)渲染跪另， 如果返回了false，就不會(huì)重新渲染煤搜，PureComponent就是重寫了shouldComponentUpdate免绿， 然后在里面作了props和state的淺層對比;
而vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的擦盾，通過對每一個(gè)屬性建立Watcher來監(jiān)聽嘲驾， 當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對應(yīng)的虛擬dom
2.react的性能優(yōu)化需要手動(dòng)去做迹卢，而vue的性能優(yōu)化是自動(dòng)的辽故，但是vue的響應(yīng)式機(jī)制也有問題， 就是當(dāng)state特別多的時(shí)候腐碱，Watcher也會(huì)很多榕暇，會(huì)導(dǎo)致卡頓，所以大型應(yīng)用（狀態(tài)特別多的）一般用react喻杈，更加可控
詳解：vue組件在初始化時(shí)會(huì)通過Object.defineProperty對每一個(gè)data屬性建立對應(yīng)的Wather彤枢，然后在模板編譯時(shí)收集依賴。以后只要修改data的任何一個(gè)屬性筒饰，就會(huì)觸發(fā)視圖的重新渲染缴啡，而且是精確的修改對應(yīng)的vdom
react的機(jī)制是每次setState的時(shí)候，調(diào)用shouldComponentUpdate瓷们，判斷state或props改變需不需要重新render业栅，如果返回true才會(huì)渲染秒咐。默認(rèn)的實(shí)現(xiàn)是返回true，PureComponent的shouldComponnentUpdate淺層對比了兩次state碘裕，考慮到性能携取，需要寫好shouldComponentUpdate。
3.?react的思路是all in js帮孔，通過js來生成html雷滋， 所以設(shè)計(jì)了jsx，還有通過js來操作css文兢，社區(qū)的styled-component晤斩、jss等
vue是把html，css姆坚，js組合到一起澳泵，用各自的處理方式，vue有單文件組件兼呵， 可以把html兔辅、css、js寫到一個(gè)文件中击喂，html提供了模板引擎來處理
詳解：react渲染是使用jsx幢妄，用js來操作html，列表渲染茫负、條件判斷等都通過js來控制蕉鸳，而vue提供了模板的語法，支持指令忍法、過濾器等模板功能潮尝，簡化了渲染邏輯。在react組件里需要寫大段js才能描述清楚的邏輯饿序，使用vue的模板可以很簡潔緊湊的表明勉失。
模板和jsx各有優(yōu)缺點(diǎn)，jsx全部使用js來寫邏輯原探，更加的靈活乱凿，也沒什么學(xué)習(xí)成本，但是有些渲染邏輯表達(dá)會(huì)比較啰嗦咽弦。 模板因?yàn)槭菍ｉT針對渲染設(shè)計(jì)的DSL徒蟆，所以寫一些渲染邏輯時(shí)會(huì)特別的簡潔和緊湊，但學(xué)習(xí)成本高一些型型，并且擴(kuò)展需要通過指令和過濾器的方式段审。
4.react是類式的寫法，api很少 而vue是聲明式的寫法闹蒜，通過傳入各種options寺枉，api和參數(shù)都很多抑淫。 所以react結(jié)合typescript更容易一起寫，vue稍微復(fù)雜姥闪。 vue結(jié)合vue-class-component也可以實(shí)現(xiàn)類式的寫法始苇，但是還是需要通過decorator來添加聲明，并不純粹
5.react可以通過高階組件（Higher Order Components--HOC）來擴(kuò)展筐喳，而vue需要通過mixins來擴(kuò)展 React剛開始也有mixin的寫法催式，通過React.createClass的api，不過現(xiàn)在很少用了疏唾。 Vue也不是不能實(shí)現(xiàn)高階組件蓄氧，只是特別麻煩函似，因?yàn)閂ue對與組件的option做了各種處理槐脏， 想實(shí)現(xiàn)高階組件就要知道每一個(gè)option是怎么處理的，然后正確的設(shè)置撇寞。
6.react做的事情很少顿天，很多都交給社區(qū)去做，交給社區(qū)去做的優(yōu)勢是可以產(chǎn)生很多優(yōu)秀的方案蔑担，但是會(huì)增加技術(shù)棧的學(xué)習(xí)成本和上手難度牌废。
vue很多東西都是內(nèi)置的，寫起來確實(shí)方便一些啤握，內(nèi)置的優(yōu)勢是技術(shù)棧學(xué)習(xí)成本低鸟缕、上手快，但是方案變得不可替換了排抬。
總結(jié)：濃縮出來就是?思性路寫擴(kuò)射?這六個(gè)字的簡便記憶方法我不便給你們描述懂从，我相信你們能悟出來，實(shí)在想知道的私信我好吧
參考文檔：
從2張運(yùn)行流程圖看vue和react區(qū)別：http://www.reibang.com/p/1ebe36fbdcda
今天就到這里了蹲蒲，各位繼續(xù)加油７Α！届搁！
