簡述Vue和React開發體驗的異同（狀態層）

前言

接上篇文章，本文咱們來聊聊對於狀態這塊，Vue和React有何異同。數組

state vs data

先說關鍵詞命名，在Vue中，經過聲明data來定義內部變量，data翻譯爲中文是數據的意思，這也符合Vue的總體設計，響應式數據，一個數據的變化，會引起一系列的關聯動做。而在React中，則變成了關鍵詞state，翻譯過來爲狀態的含義，經過狀態驅動視圖的更新。markdown

在Vue中，數據是響應式的，這個響應式包含兩方面：dom

JS內存中的變量值發生變化，通知DOM進行繪製
DOM中元素內容發生變化，通知JS內存中的變量值改變

在實現上，Vue利用JS的API，實現了點運算符的重載，利用如v-model等顯式聲明，經過對DOM元素的監聽，及時反饋至內存變量的更新。Vue的這種作法實際上是有必定的性能損耗的，可是帶來是開發者的低門檻、高效率。函數

React在狀態更新這塊採用的是顯式聲明（setState），狀態更新後，調用render函數，通知DOM進行繪製，數據流的傳遞是單向的（固然想實現Vue中的反向更新也是簡單的，只是官方並不提倡）工具

咱們來看個簡單的例子，實現input組件輸入值的綁定：性能

Vue:
<template>
    <input type="text" v-model="value" />
</template>
<script>
    export default {
        data() {
            return {
                value: ""
            }
        }
    }
</script>

React:
function render() {
    const [value, setValue] = useState("");
    return (
       <input type="text" onChange={(e) => setValue(e.target.value)} />
    )
}
複製代碼

Vue能夠經過v-model這個指令把數據進行了響應式關聯，能夠減小寫監聽回調的一部分代碼，但事實上，Vue也能夠寫成這樣：this

Vue:
<template>
    <input type="text" :value="value" @input="setValue">
</template>
<script>
    export default {
        data() {
            return {
                value: ""
            }
        },
        methods: {
            setValue(e) {
                this.value = e.target.value;
            }
        }
    }
</script>
複製代碼

雖然真實開發中你們不會這麼寫，誰叫Vue已經提供了現成的指令了呢。編碼

在Vue中，有一個比較好用的功能：computed，能夠監聽依賴項的改變而進行時時計算，好比咱們想實現第三個輸入框爲前兩個輸入框的值，咱們會這麼寫：spa

Vue:
<template>
    <input type="text" v-model="a" /> +
    <input type="text" v-model="b" /> =
    <input type="text" v-model="sum" />
</template>
<script>
    export default {
        data() {
            return {
                a: "",
                b: "",
            }
        },
        computed: {
            sum() {
                return this.a + this.b
            }
        }
    }
</script>
複製代碼

computed的依賴收集

寫到這裏的時候，我產生了一個好奇的點，sum函數的調用時機如何肯定，直觀反應是須要收集該函數的依賴項，在React中，直接會要求開發者傳入一個deps數組，只要每次比較數組的引用地址就能夠肯定，而在Vue中並無要求開發者聲明。常見的依賴收集有如下兩種方式翻譯

靜態詞法分析
執行函數後獲取

靜態分析會比較消耗CPU性能，舉個例子：

computed: {
    sum() {
        const a = "x";
        const b = a;
        const c = b;
        return this[c] * 2
    }
}
複製代碼

很明顯，這個函數的依賴是x變量，可是須要推到x變量須要依次推導 c => b => a => "x"，若是裏面涉及到循環引用還會更加複雜，顯然Vue不會走這條路。那麼執行代碼呢，這條路貌似是可行的，由於在Vue中數據的讀取操做能夠被監聽到，那麼思路能夠是：執行一次sum函數，完畢後取全部被調用get的變量，組成依賴項，查閱相關資料後，證實Vue也是這麼作的。

若是代碼寫成這樣的話：

computed: {
    sum() {
        if (Math.random() < 0.5) {
            return;
        }
        return this.a + this.b
    }
}
複製代碼

這種狀況下，有一半的機率致使數據沒法及時更新，由於是首次執行的時候肯定依賴項的。若是想在React實現這個需求，能夠本身封裝自定義hooks，能夠模擬實現computed的功能。

邏輯複用

再來談談邏輯的複用性，在React還沒出Hooks以前，和Vue差很少，UI描述和邏輯是混在一塊兒的，想抽也抽不出來。因此在平時開發中大部分場景都是複製代碼的形式來作的，能作的一些事情也比較有限，好比抽工具庫、精心設計一個組件的規格。在React Hooks出現後，這件事發生了一些變化，UI描述和邏輯自然被拆開了，邏輯的複用也變得瓜熟蒂落了。

總結

從數據驅動UI上來講，React和Vue沒有什麼本質上的區別，狀態改變通知UI層重繪，只是Vue會比較隱晦，React則經過setState顯式調用
Vue面向開發者作了不少「小工具」，來幫助開發者提升生產效率
從開發體驗上來講，仍是仁者見仁智者見智了，畢竟你們的編碼習慣都受着不少因素的影響