今天的考覈題目: 你知道React和Vue的區別嗎? skr，skr

React 和 Vue 的區別

博主面了幾家公司，看簡歷上寫着使用Vue.js框架，就會問，你能說一說 vue 和 react的區別嗎 ？react 聽過，沒用過，因此就只能尷尬的說不怎麼了解react。這不，最近剛學了react (不斷爬坑中)，同時看了些博客文章，當一回搬運工，若有錯誤，請指出 ～

簡單的自我介紹一下

React是由Facebook建立的JavaScript UI框架，它的誕生改變了JavaScript世界，最大的一個改變就是React推廣了Virtual DOM， 而且創造了新的語法 - JSX，JSX 容許在JavaScript中寫html代碼。

Vue是由尤大大開發的一個MVVM框架，它採用的是模板系統而不是JSX。

安利一波

Virtual DOM

一聽可能有點懵逼 ？我也很懵逼。因此咱們來看看別人怎麼說的 ：Vue.js(2.0版本)與React的其中最大一個類似之處，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual DOM基本上說就是它名字的意思：虛擬DOM，DOM樹的虛擬表現。

Virtual DOM 是一個映射真實DOM的JavaScript對象，若是咱們要改變任何元素的狀態，那麼是先在Virtual DOM 上先進行改變，而不是直接地去修改真實的DOM。
    好比在Vue中，咱們將原來的節點改爲這樣 :
        // 原DOM
        <div class='box'>
            <p class='label'>
                <span>{{ label }}</span>
            </p>
        </div>

        // 修改的DOM
        <div class='box'>
            <p class='label'>
                <span>{{ label }}</span>
                <span>{{ username }}</span>
            </p>
        </div>
        
    咱們往p節點中新增了一個span節點，因而咱們一個新的Virtual DOM對象會被建立。
    而後新的Virtual DOM 和舊的Virtual DOM比較，經過diff算法，算出差別，而後這些差別就會被應用在真實的DOM上

複製代碼

Vue 很「 囂張 」，它宣稱能夠更快地計算出Virtual DOM的差別，這是因爲它在渲染過程當中，因爲vue會跟蹤每個組件的依賴收集，經過setter / getter 以及一些函數的劫持，可以精確地知道變化，並在編譯過程標記了static靜態節點，在接下來新的Virtual DOM 而且和原來舊的 Virtual DOM進行比較時候，跳過static靜態節點。因此不須要從新渲染整個組件樹。

React默認是經過比較引用的方式進行，當某個組件的狀態發生變化時，它會以該組件爲根，從新渲染整個組件子樹。若是想避免沒必要要的子組件從新渲染，你須要在全部可能的地方使用PureComponent，或者手動實現shouldComponentUpdate方法。可是Vue中，你能夠認定它是默認的優化。

構建工具

React 採用 Create-React-App， Vue 採用的是Vue-Cli，這兩個工具很是的好用啊，大兄弟，都能爲你建立一個好環境，不過Create-Reacr-App會逼迫你使用webpack和Babel，而Vue-cli能夠按需建立不一樣的模板，使用起來更加靈活一點

數據流

（這裏借用一波言川老鐵的圖，下邊會貼出連接）

很直觀的，咱們能夠看到，在Vue2.x中，只能parent -> Child <-> DOM的形式，而React只能單向傳遞，React一直提倡的是單向數據流，數據主要從父節點傳遞到子節點（經過props）。若是頂層（父級）的某個props改變了，React會重渲染全部的子節點。咱們只能經過setState來改變狀態。

模板渲染方式不一樣

前面說了，Vue和React的模板有所區別，React是經過JSX來渲染模板，而Vue是經過擴展的HTML來進行模板的渲染。React經過原生JS實現模板中的常見語法，好比說條件啊、循環啊、三元運算符啊等，都是經過JS語法實現。而Vue是在和組件代碼分離的單獨模板中，經過指令v-if、v-for等實現。

這裏react比較好點，好比咱們要引用一個組件，react直接import 引入，而後能夠直接在render中調用了，可是！！vue須要import以後，還要在components裏去聲明，才能用，好氣哦 ～

Vuex 和 Redux

在Vue中，咱們是經過Vuex進行狀態管理，而在React中，咱們是經過Redux進行狀態管理。可是這二者在使用上仍是有區別的。

在vuex中，咱們能夠經過在main.js中，引入 store文件夾，並把store掛載到new Vue實例中，這樣咱們能夠直接經過$store靈活使用。

• 你能夠經過dispatch和commit進行更新數據，經過this.$store.state.xx讀取數據
• 或者你能夠經過mapState / mapActions 進行vuex的操做

而在React中，咱們須要每個組件都引入connect，目的就是把props和dispatch鏈接起來。

另外！！！咱們vuex能夠直接dispatch action也能夠commit update，可是redux只能經過dispatch，而後在reducer裏，接收到action，經過判斷action的type，從而進行對應的操做，redux不能直接調用reducer進行修改！！

Redux使用的是不可變的數據，而Vuex的數據是可變的，Redux每次修改更新數據，其實就是用新的數據替換舊的數據，而Vuex是直接修改原數據

    Redux 在檢測數據變化的時候，是經過 diff 的方式比較差別的，而Vuex其實和Vue的原理同樣，是經過 getter/setter來比較的，由於在vue實例的時候，進行了依賴收集。
複製代碼

不差上下？

反正我以爲他們兩個都好，skr，skr，若是你想作一個小型項目就用vue，想作大型項目就用react，我是不知道怎樣算小型，怎樣算大型，我爲所欲爲，想用哪一個就用哪一個，我不會告訴你，我都是作的我的小項目 ～

---

相關連接

• 📢 我的博客

• 言川 - 關於Vue和React區別的一些筆

• Vue 官網 - 對比其餘框架

• 衆成翻譯 - Vue vs React: Javascript 框架之戰