vuevsreact源碼剖析

㈠ Vue和React那個更好

兩個框架各有優點，整體來說React更成熟。
1. VUE主要用模板搭建應用，React要求開發者藉助JSX創建DOM。
2. VUE簡單上手，中小型項目更適合，大型應用選React。
3. React Native更適合原生APP的框架，如果是多端開發，應選擇React。

㈡ Vue框架和react框架有什麼不同嗎

React 從一開始的定位就是提出 UI 開發的新思路。
當年 Pete Hunt 最開始推廣 React 的時候的一句口號就叫 "Rethinking Best Practices"，這樣的定位使得 React 打開了一些全新的思路，吸引了一群喜歡折騰的早期核心用戶，並在這個基礎上通過社區迭代孵化出了許多今天被 React 開發者當作常識的 pattern。
這是 React 偉大的地方，Vue 裡面也有很多地方是直接受到了 React 的啟發。
Vue 從一開始的定位就是盡可能的降低前端開發的門檻，讓更多的人能夠更快地上手開發。
從載入速度、運行時性能來說，兩者目前綜合各種場景應該說是沒有什麼質的差別。硬要說的話，Vue 在 update 性能優化方面需要的心智負擔可能少那麼一點。

㈢ react vue選哪一個

個人推薦選擇vue

先給你上一個二者對比;

1、Vue上手更簡單，特別是從dom和jquery時代過來的程序員，或者習慣模板語言的後端開發，更容易接受Vue。

2、Vue從設計上講，跟趨向於簡化使用，就是說Vue從骨子裡面就是想用起來簡單，但React更多的是為大型工程考慮。

3、React上手稍微難一點，除了Vue那些基礎，你還得學習，純函數組件，函數式編程，JSX，css-in-js，高階組件，Rex等。

4、在組件化上，React更純粹，也可以說更強大一些，而Vue不是完全組件化，應對一些復雜組件，可能會有些麻煩。

5、React的設計，配合TypeScript，更適合大型或者超大型的多人協作項目，管理起來更規范，不容易出錯。

6、對於移動端跨平台的支持，React的兄弟項目ReactNative已經佔了半壁江山，雖然React和ReactNative可以看成兩個東西，但是也有很多關聯性。而Vue在移動端開發上，目前來看，有阿里的Weex基於Vue，據說也很強大，但是肯定不如ReactNative那麼主流和穩定，具體Vue在移動端的表現如何，需要時間觀察。

7、雖然Vue在中國、日本、韓國、法國等地區熱度很高，在美國也有一定影響力，但在全世界范圍看，React的社區比Vue要更大，資源也更豐富，React的背景Facebook，實力強於個人開發者-尤雨溪(背靠了阿里和一些小贊助公司)。但實力是相對的，實際上，兩者實力都很強，不用擔心Vue的實力不足或穩定性，Vue足夠優秀，3、5年內應該都會是主流，只能說React在全世界范圍內的資源更多，影響更大而已。

8、Vue和React本身只是一個基礎庫，對於稍微復雜一點的項目來說，大多數用戶都不會自己搭框架。所以說，選擇Vue還是React，要重點比較兩者的第三方開發框架、UI框架、組件庫及各種資源是否豐富、有活力。

9、就我目前看到的情況而言，Vue體系較熱的UI框架有ElementUI、iView/ViewUI、Ant Design Vue、vant、mint-ui、vux等，Vue Admin（後台管理系統）相關資源比較豐富，很多中小公司都在用；React熱門UI框架有Material-UI、Ant Design、Element-react等，比較集中。可以這樣說，Vue的生態就像是游擊隊，而React更像是正規軍。ElementUI和Ant Design都是阿里系的，如果沒有Ant Design的話，感覺Vue在國內要強盛一些，但有了阿里Ant Design強勢介入，許多中間派就倒向React了，特別是一些稍微大一點的公司。

10、其他因素：Vue的核心開發團隊只有尤雨溪一人（大概90%的代碼都是他寫的），假如他休假了、生病了，主要開發就暫停了，Vue想要健康的發展，應該要增加1~2個核心開發（每個人都深度參與開發，並可以推動開源生態發展）。

11、其他因素：React從一開始就抱上了TypeScript的大腿，而Vue目前仍以ES為主，不得不說，在很長一段時間內，TS都是優於ES的，而Vue社區要切換TS生態，還有一段路要走。這註定了大公司、大項目選React+TS的概率要大一些。中小公司多少也會受到大公司的影響。

總結：

1、如果只是做項目，兩者都很好，都是主流，都能極大的增強前端開發能力，選任何一個都沒有錯（做選擇時，可考慮其他一些因素，比如自身能力、第三方組件）。

2、如果想抱大腿、跳槽大公司，建議選React + TypeScript練手。

3、5年以後的長遠考慮？這兩個的生命力，足以支撐5年，但你要說5年之後，它們是否還是主流，這個真不好說。現在前端技術發展太快。

4、作為一個專業前端，建議前期學Vue，後期再學React；反之，如果之前直接學的React，則一般不需要再去學Vue了，做項目，選一個就行了。

希望看完我的觀點後，能對你有些幫助！

㈣ react和vue哪個比較好

vue比較好。

VUE 是iOS和Android平台上的一款 Vlog 社區與編輯工具，允許用戶通過簡單的操作實現 Vlog 的拍攝、剪輯、細調、和發布，記錄與分享生活。還可以在社區直接瀏覽他人發布的 Vlog，與 Vloggers 互動。

隨著手機攝像頭的發展，越來越多的人開始使用手機拍照和攝像。攝像一般來說要比拍照門檻高，但是視頻傳播的信息量又遠大於照片。VUE 就誕生在這樣的背景下，希望用拍照一樣簡單的操作，幫助用戶在手機上拍攝精美的短視頻。

主要功能：

分鏡頭：通過點按改變視頻的分鏡數實現簡易的剪輯效果，而剪輯能夠讓視頻傳達更多的信息。

實時濾鏡：由電影調色專家調制的12款濾鏡供選擇，切換至前置攝像頭會出現自然的自拍美顏功能。

貼紙：支持40款手繪貼紙，還可以編輯貼紙的出現時間。

自由畫幅設置：支持1:1、16:9、2.39:1 三種畫幅的視頻拍攝。

㈤ Vue和React的使用場景和深度有何不同

首先，其實Vue也完全可以全量賦值的，唯一需要的小優化就是給v-repeat列表一個track-by屬性，提示一下如何判斷兩個對象是否是同一份數據。如果是沒有復雜交互的列表，可以直接track-by="$index"原地復用DOM元素。合理使用track-by的情況下，Vue甚至可以比React更快（這里渲染的是100*5的數據表，每一幀都是全量新數據賦值）：dbmon(Vue)dbmon(react)在超大量數據的首屏渲染速度上，React有一定優勢，因為Vue的渲染機制啟動時候要做的工作比較多，而且React支持服務端渲染。需要指出的一點：React的VirtualDOM也不是不需要優化的。復雜的應用里你有兩個選擇1.手動添加shouldComponentUpdate來避免不需要的vdomre-render；2.Components盡可能都用pureRenderMixin，然後採用Flux結構+Immutable.js。其實也不是那麼簡單的。相比之下，Vue由於採用依賴追蹤，默認就是優化狀態：你動了多少數據，就觸發多少更新，不多也不少。說起Flux架構，FB提供的標准實現非常繁瑣，所以社區的各種造輪子版本層出不窮，目前其實還沒有找到一個公認的最佳實踐，而且大部分新Flux實現都引入了很多函數式概念，你如果對函數式編程不熟悉，光搞清楚那些概念就得花很久。如果你真的理解了Flux，你又會發現其實Vue也是可以應用Flux架構的。比如optimizely/nuclear-js·GitHub是一個Flux變種，他們就是同時把這個東西用在了React和Vue上面。再談談開發風格的偏好：React推薦的做法是JSX+inlinestyle，也就是把HTML和CSS全都整進JavaScript了。Vue的默認API是以簡單易上手為目標，但是進階之後推薦的是使用webpack+vue-loader的單文件組件格式：依然是熟悉的HTML和CSS，但是可以放在一個文件里。而且你還可以使用你想要的預處理器，比如LESS,Jade,Coffee,Babel，都可以。然後扯一扯模板vs.JSX的問題。JSX在邏輯表達能力上雖然完爆模板，但是很容易寫出凌亂的render函數，不如模板看起來一目瞭然。當然這里也有個人偏好的問題。React的社區/組件生態比Vue大很多，這個是很顯然的。不過說實話我很少見到現成的第三方組件完全符合我的要求。最後，使用場景上來說：React配合嚴格的Flux架構，適合超大規模多人協作的復雜項目。理論上Vue配合類似架構也可以勝任這樣的用例，但缺少類似Flux這樣的官方架構。小快靈的項目上，Vue和React的選擇是開發風格的偏好。對於需要對DOM進行很多自定義操作的項目，Vue的靈活性優於React。---更新：樓下有些回答說Vue的核心是MVVM雙向綁定，然後就直接跳躍到了『不適合持續工程迭代』的結論。且不說這樣的跳躍太草率，這樣的看法本身對於雙向綁定的理解也是有偏差的。表單的雙向綁定，說到底不過是（value的單向綁定+onChange事件偵聽）的一個語法糖，你如果不想用v-model，像React那樣處理也是完全可以的。另一方面，組件間的數據傳遞，Vue默認是單向的，和React一樣。React本身並不存在所謂的『單向數據流』，這完全是Flux引入的概念。其核心還是在於避免組件的localstate，強調把state抽取出來進行集中的管理。沒有Flux的情況下React一樣會有狀態難以管理的問題，其根源在於在哪裡存放和管理state，和雙向綁定沒有本質聯系。那難道Vue就不能這樣管理狀態嗎？當然是可以的，Vue現在可以通過egoist/revue·GitHub和Rex進行配合，也可以用Vue專屬的狀態管理架構Vuex:vuejs/vuex·GitHub，『單向數據流』並沒有React吹的那麼神，直接因為這一點就覺得Vue不適合工程迭代，完全站不住腳。

㈥ 關於Vue.js 和 react.js 的異同

react.js和vue.js的異同：
vue---react.js 的相同點：
vue和react是兩個不像相同的框架，但是他們之間也是用共同特點的，所有的前端框架都有一些相同的特點，vue和react之間最關鍵的相同之處在於，它們在被設計出來時所用的思想或者說理念是一樣的，比如說都用到了component組件，props參數傳遞，組件之間的通信，state狀態管理器，lifecircle聲明周期等等，似乎現在的前端框架都已經成為了mvc或則mvvc的樣子，雖然還有一部分前端開發還是傳統模式，但是必然會被node+webpack+vue /react---之類的自動化逐漸替代...
vue----react.js 的不同之處：
vue和react.js最大的不同之處在於它們對DOM的渲染方式不同，vue可以直接在vue文件中使用html標簽，數據綁定時類似angular，可以進行條件渲染，而react.js則採用了jsx語法，運用虛擬DOM 的概念進行DOM對頁面元素進行渲染，獲取頁面元素需要用ref來獲取，似乎更加安全。

㈦ vue和react哪個好點

React VS Vue：性能
應用程序的更新換代表現在用戶界面和一個叫DOM的東西上。DOM分為虛擬DOM和真實DOM。它的種類對所有編程技術的性能能產生巨大影響。
React：React使用虛擬DOM，量級輕，而且並不局限於特定瀏覽器，從而消除了性能低下的問題。這也是React和虛擬DOM流行的主要原因。
Vue：Vue也使用虛擬DOM，但是和React相比，性能更為優越，而且沒有bug。

React VS Vue：框架大小
React的體積比Vue.js稍微大一點，大概100 KB，Vue則是80KB。框架/庫的大小對軟體開發項目有深遠影響。
React需要其他庫的特定任務支持，比如路由配置。小體積很適合輕量應用程序。Vue的體積更小，因此更為適合。

React VS Vue：靈活性
React：官方的React庫中並沒有太多內容。React中可以靈活自主地選擇工具。Angular等一些框架會在在包中提供所有的東西，沒有足夠的試驗空間。
能夠和React集成使用的技術有React Router、Rex和MobX等辦公管理框架，讓開發者能夠創建動態應用。經驗豐富的移動應用程序開發人員會靈活運用它，享受這種開發的自由。
Vue：和React不同，Vue的官方網站上為Vue .js開發人員提供了一些內容，Vue服務端渲染也支持伺服器端開發。舉例來說，用於狀態管理的Vuex和用於路由的Vue路由器都是可用於自定義軟體開發服務的附加組件。
通過對比你就知道如何選擇

㈧ react和vue的實現原理有什麼不同

Vue和React兩個JavaScript框架都是當下比較受歡迎的，他們兩者之間的區別有哪些，各自的優缺點是什麼，本文將為你呈現。

正如我們之前提到的，WordPress 的核心團隊正爭論著為應該將哪款（前端框架）加入現在的架構之中。目前看來，暫時脫穎而出的是React與Vue.js，社區中的很多成員正權衡著這兩款框架的利弊。

那到底哪款框架會勝出，哪款框架又會淪為昔日的prototype.js.呢？讓我們一起看看吧。

我已經寫出了兩個幾乎一樣的web應用，一個是基於Vue，另一個則基於React，可以方便你在看這篇文章的時候查找相關代碼。

React sample app
Vue sample app

簡單介紹

除非你最近一直不關注前端的發展，不然你肯定聽說過由Facebook創建的JavaScript UI框架——React。它支撐著包括Instagram在內的大多數Facebook網站。React與當時流行的jQuery,Backbone.js和Angular 1等框架不同，它的誕生改變了JavaScript的世界。其中最大的變化是React推廣了Virtual DOM（我們稍後探究）並創造了新的語法——JSX，JSX允許開發者在JavaScript中書寫HTML（譯者註：即HTML in JavaScript）。WAT?

Vue致力解決的問題與React一致，但卻提供了另外一套解決方案。Vue使用模板系統而不是JSX，使其對現有應用的升級更加容易。這是因為模板用的就是普通的HTML，通過Vue來整合現有的系統是比較容易的，不需要整體重構。同時Vue聲稱它更容易學習，我最近才接觸Vue，能證明所言非虛。關於Vue還需要說的是，Vue主要是由一位開發者進行維護的，而不像React一樣由如Facebook這類大公司維護。
相似之處

React與Vue存在很多相似之處，例如他們都是JavaScript的UI框架，專注於創造前端的富應用。不同於早期的JavaScript框架「功能齊全」，Reat與Vue只有框架的骨架，其他的功能如路由、狀態管理等是框架分離的組件。
Virtual DOM

啊哈，人們經常說Virtual DOM是什麼呢？

t019804d4b5dfd6da0b

Vue.js(2.0版本)與React的其中最大一個相似之處，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual DOM基本上說就是它名字的意思：虛擬DOM，DOM樹的虛擬表現。它的誕生是基於這么一個概念：改變真實的DOM狀態遠比改變一個JavaScript對象的花銷要大得多。

Virtual DOM是一個映射真實DOM的JavaScript對象，如果需要改變任何元素的狀態，那麼是先在Virtual DOM上進行改變，而不是直接改變真實的DOM。當有變化產生時，一個新的Virtual DOM對象會被創建並計算新舊Virtual DOM之間的差別。之後這些差別會應用在真實的DOM上。

例子如下，我們可以看看下面這個列表在HTML中的代碼是如何寫的：

<ul class="list">
<li>item 1</li>
<li>item 2</li>
</ul>

而在JavaScript中，我們可以用對象簡單地創造一個針對上面例子的映射：

{
type: 'ul',
props: {'class': 'list'},
children: [
{ type: 'li', props: {}, children: ['item 1'] },
{ type: 'li', props: {}, children: ['item 2'] }
]
}

真實的Virtual DOM會比上面的例子更復雜，但它本質上是一個嵌套著數組的原生對象。

當新一項被加進去這個JavaScript對象時，一個函數會計算新舊Virtual DOM之間的差異並反應在真實的DOM上。計算差異的演算法是高性能框架的秘密所在，React和Vue在實現上有點不同。

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

而對於React而言，每當應用的狀態被改變時，全部子組件都會重新渲染。當然，這可以通過shouldComponentUpdate這個生命周期方法來進行控制，但Vue將此視為默認的優化。

小結：如果你的應用中，交互復雜，需要處理大量的UI變化，那麼使用Virtual DOM是一個好主意。如果你更新元素並不頻繁，那麼Virtual DOM並不一定適用，性能很可能還不如直接操控DOM。
組件化

React與Vue都鼓勵組件化應用。這本質上說，是建議你將你的應用分拆成一個個功能明確的模塊，每個模塊之間可以通過合適的方式互相聯系。關於組件化的例子可以在這篇文章的中間部分被找到:

你可以認為組件就是用戶界面中的一小塊。如果讓我來設計Facebook的UI界面，那麼聊天窗口會是一個組件，評論會是另一個組件，不斷更新的好友列表也會作為一個組件。

在Vue中，如果你遵守一定的規則，你可以使用單文件組件.

//PastaItem.vue

<template>
<li class="pasta-dish list-unstyled">
<div class="row">
<div class="col-md-3">
<img :src="this.item.image" :alt="this.item.name" />
</div>
<div class="col-md-9 text-left">
<h3>{{this.item.name}}</h3>
<p>
{{this.item.desc}}
</p>
<button v-on:click="addToOrderNew" class="btn btn-primary">Add to order</button> <mark>{{this.orders}}</mark>
</div>
</div>
</li>
</template>

<script>

export default {
name: 'pasta-item',
props: ['item'],
data: function(){
return{
orders: 0
}
},
methods: {
addToOrderNew: function(y){
this.orders += 1;
this.$emit('order');
}
}
}

</script>

<style src="./Pasta.css"></style>

正如上面你看到的例子中，HTML, JavaScript和CSS都寫在一個文件之中。你不再需要在.vue組件文件中引入CSS，雖然這也是可以的。

㈨ Vue 和 React 的使用場景和深度有何不同

不同：
1.react基本上已經有一套遵循Flux的完整開發方案（基本上也就這一套大家默認的方式），而vue雖然有配合vuex使用，但是還有其他很多組織方式來解決，所以並不算是有固定模式，相對靈活很多，當然這個你可以看作是優勢，也可以看作是不足
2.react社區還是要比vue大很多
3.react在view層侵入性還是要比vue大很多的
4.首次渲染性能，對於大量數據來說react還是比vue有優勢
5.對於component的寫法，react偏向於all in js，語法學習上需要下一些功夫，而vue配合vue-loader，其實在很大程度上讓你不會覺得陌生--這不就是web component么。