前言

幾年前，我決定試著分別在 React 和 Vue 中構(gòu)建一個相當(dāng)標(biāo)準(zhǔn)的 To Do（待辦事項）應(yīng)用。這兩個應(yīng)用都是使用默認(rèn)的 CLI 構(gòu)建的（React 的 create-react-app 和 Vue 的 vue-cli）。我想盡量保持中立，通過這樣的例子來告訴大家這兩種技術(shù)執(zhí)行特定任務(wù)是是怎樣做的。

當(dāng) React Hooks 發(fā)布時，我為這篇文章更新了“2019 版”，用函數(shù)式 Hooks 取代了類組件。隨著 Vue 3 及其組合（Composition）API 的發(fā)布，現(xiàn)在是時候更新這篇文章的“2020 版”了。

2019 版：我用 React 和 Vue 構(gòu)建了同款應(yīng)用，來看看哪里不一樣

先來大致看一下兩款應(yīng)用的外觀：

兩款應(yīng)用的 CSS 代碼完全相同，但代碼所處的位置有所不同。記住這一點，接下來讓我們看一下它們的文件結(jié)構(gòu)：

你會發(fā)現(xiàn)它們的結(jié)構(gòu)也幾乎相同。唯一的區(qū)別是 React 應(yīng)用有兩個 CSS 文件，而 Vue 應(yīng)用沒有任何 CSS 文件。這是因為在 create-react-app 中，默認(rèn)每個 React 組件都會附帶一個單獨文件來保存其樣式，而 Vue CLI 用單一的文件來為默認(rèn)組件包含 HTML、CSS 和 JavaScript。

最后它們倆都達(dá)成了同樣的目標(biāo)，也沒什么可多說的，因為在 React 或 Vue 中你都不能改變文件結(jié)構(gòu)。選擇哪個確實取決于個人喜好。開發(fā)社區(qū)關(guān)于 CSS 的結(jié)構(gòu)化方式這個話題有大量的討論，尤其是 React 這塊，因為有許多 CSS-in-JS 解決方案，諸如樣式化組件和 emotion 等。順便說一句，CSS-in-JS 就是字面上的意思。雖然這些都很有用，但這里我們只用兩邊的 CLI 給出的結(jié)構(gòu)。

在進(jìn)一步深入之前，我們先來看一下典型的 Vue 和 React 組件長什么樣：

典型的 React 文件：

典型的 Vue 文件：

看過之后我們來深入了解細(xì)節(jié)吧！

我們?nèi)绾瓮蛔償?shù)據(jù)？

首先，“突變數(shù)據(jù)”到底是什么意思呢？聽起來是不是有點高深？其實它基本上就是指更改我們已存儲的數(shù)據(jù)。如果我們想將一個人名的值從 John 更改為 Mark，我們就是在“突變“這份數(shù)據(jù)。這就是 React 和 Vue 之間的關(guān)鍵區(qū)別所在。Vue 本質(zhì)上創(chuàng)建了一個數(shù)據(jù)對象，可以在其中自由更新數(shù)據(jù)，而 React 通過所謂的狀態(tài) Hook 來處理數(shù)據(jù)突變。

從下面的圖片中可以看到兩者的設(shè)置，然后我們會具體說明：

React 狀態(tài)：

Vue 狀態(tài)：

于是你看到我們將相同的數(shù)據(jù)傳遞給了兩者，但各自的結(jié)構(gòu)有所不同。

在 React 中，至少從 2019 年開始，我們一般會通過一系列 Hooks 處理狀態(tài)。你可能以前沒接觸過這種概念，一開始它看起來可能有點奇怪。它的工作機(jī)制基本上是這個樣子：

假設(shè)我們要創(chuàng)建一個待辦事項列表，我們可能需要創(chuàng)建一個名為 list 的變量，它可能需要接收一個由字符串或?qū)ο蠼M成的數(shù)組（比如說給每個 todo 字符串一個 ID 或其他一些東西）。我們需要寫的代碼是const [list, setList] = useState([])。這里我們用的就是 React 里面的 Hook，稱為 useState。它本質(zhì)上是讓我們能夠在組件中保留局部狀態(tài)。

另外，你可能已經(jīng)注意到我們在 useState() 內(nèi)部傳入了一個空數(shù)組 []。放在其中的是我們希望 list 最初設(shè)置的內(nèi)容，這里我們希望是一個空數(shù)組。但從上圖可以看到，我們在數(shù)組內(nèi)傳入了一些數(shù)據(jù)，這些數(shù)據(jù)最后成了 list 的初始化數(shù)據(jù)。想知道 setList 是做什么的？稍后會進(jìn)一步說明！

在 Vue 中，通常會將組件的所有突變數(shù)據(jù)放置在一個 setup() 函數(shù)內(nèi)，該函數(shù)返回一個對象，其中包含要公開的數(shù)據(jù)和函數(shù)（就是那些你要在應(yīng)用中使用的東西）。你會注意到，應(yīng)用中的每個狀態(tài)數(shù)據(jù)（也就是我們希望能夠突變的數(shù)據(jù)）都包裝在一個 ref() 函數(shù)內(nèi)部。這個 ref() 函數(shù)是我們從 Vue 導(dǎo)入的，可讓我們的應(yīng)用在這些數(shù)據(jù)更改 / 更新時完成更新。簡而言之，如果你想在 Vue 中創(chuàng)建突變數(shù)據(jù)，請為 ref() 函數(shù)分配一個變量，并在其中放入默認(rèn)數(shù)據(jù)。

如何在應(yīng)用中引用突變數(shù)據(jù)？

假設(shè)我們有一些數(shù)據(jù)名為 name，被分配了 Sunil 值。

在 React 中，由于我們使用 useState() 創(chuàng)建了較小的狀態(tài)，因此很可能已經(jīng)用const [name, setName] = useState('Sunil')創(chuàng)建了一些東西。在應(yīng)用中，我們將簡單地調(diào)用 name 來引用同一段數(shù)據(jù)。這里的主要區(qū)別在于我們不能簡單地寫上name = 'John'，因為 React 有一些限制來預(yù)防這種簡單且無所顧忌的突變。在 React 中，我們要寫成setName('John')。這里用到了 setName。在const [name, setName] = useState('Sunil')中，它創(chuàng)建兩個變量，一個變量變?yōu)閏onst name = 'Sunil'，而第二個 const setName 被分配了一個函數(shù)，該函數(shù)使 name 可以用新值重新創(chuàng)建。

在 Vue 中，它位于 setup() 函數(shù)內(nèi)部，并且被稱為const name = ref('Sunil')。在應(yīng)用中，我們將調(diào)用 name.value 來引用它。如果要使用在 ref() 函數(shù)內(nèi)部創(chuàng)建的值，我們將在變量上尋找.value 而不是簡單地調(diào)用該變量。換句話說，如果我們想要一個持有狀態(tài)的變量值，我們將尋找 name.value 而不是 name。如果要更新 name 的值，可以通過更新 name.value 來完成。例如，假設(shè)我想將我的名字從 Sunil 更改為 John, 可以寫name.value = "John"來做到這一點。

實際上，React 和 Vue 在這里做的是同樣的事情，也就是創(chuàng)建可以更新的數(shù)據(jù)。Vue 本質(zhì)上會在每次更新一條包裝在 ref() 函數(shù)內(nèi)的數(shù)據(jù)是默認(rèn)結(jié)合它自己的 name 和 setName 版本。React 要求你使用內(nèi)部值調(diào)用 setName() 來更新狀態(tài)，而如果你曾嘗試更新數(shù)據(jù)對象內(nèi)部的值，Vue 就會假設(shè)你要這么做。那么為什么 React 會費勁地將值與函數(shù)分開，還要使用 useState() 呢？這是因為當(dāng)狀態(tài)改變時，React 希望重新運行某些生命周期 Hooks。在我們的例子中，當(dāng)你調(diào)用 setName() 時，React 會知道有些狀態(tài)已更改，所以可以運行它們的生命周期 Hooks。如果你直接改變狀態(tài)，React 將不得不做更多的工作來跟蹤更改以及要運行的生命周期 Hooks 等。

現(xiàn)在我們已經(jīng)搞明白了數(shù)據(jù)突變，接下來看看在兩個 To Do 應(yīng)用中添加新項目的方法。

我們?nèi)绾蝿?chuàng)建新的待辦事項？

React：

const createNewToDoItem = () => { 
    const newId = generateId(); 
    const newToDo = { id: newId, text: toDo }; 
    setList([...list, newToDo]);    setToDo(""); 
}; 

在 React 你是怎么做的？

在 React 中，我們的輸入字段有一個名為 value 的屬性。每次通過 onChange 事件偵聽器更改它的值時，都會自動更新此值。JSX（基本上是 HTML 的變體）如下所示：

<input 
    type="text" 
    placeholder="I need to..." 
    value={toDo} 
    onChange={handleInput} 
    onKeyPress={handleKeyPress} 
/> 

每次更改值時，它都會更新狀態(tài)。handleInput 函數(shù)如下所示：

const handleInput = (e) => { 
    setToDo(e.target.value);}; 

現(xiàn)在，每當(dāng)用戶按下頁面上的 + 按鈕添加新項目時，都會觸發(fā)createNewToDoItem 函數(shù)。我們再來看一下這個函數(shù)，搞清楚具體發(fā)生了什么：

const createNewToDoItem = () => { 
    const newId = generateId(); 
    const newToDo = { id: newId, text: toDo }; 
    setList([...list, newToDo]);    setToDo(""); 
}; 

本質(zhì)上，newId 函數(shù)是在創(chuàng)建一個新 ID，該 ID 將提供給我們的新 toDo 項目。newToDo 變量是一個對象，有一個 id 鍵，其值由 newID 確定。它還有一個 text 鍵，其值由 toDo 確定。這個 toDo 就是輸入值更改時要更新的那個 toDo。

setList 函數(shù)到此為止，然后我們傳入一個包含整個 list 以及新創(chuàng)建的 newToDo 的數(shù)組。

你可能覺得…list 看起來很奇怪：開頭的三個點稱為 spread 運算符，負(fù)責(zé)將 list 中的所有值作為單獨的項目傳遞，而不是簡單地把所有項目打包在一起作為數(shù)組傳遞。感覺有些糊涂嗎？那我強(qiáng)烈建議你仔細(xì)閱讀 spread 運算符的相關(guān)介紹，因為它很有用！

最后我們運行 setToDo() 并傳入一個空字符串。這樣我們的輸入值為空，可以輸入新的 toDo 了。

Vue：

function createNewToDoItem() { 
    const newId = generateId(); 
    list.value.push({ id: newId, text: todo.value }); 
    todo.value = ""; 
} 

在 Vue 你是怎么做的？

在 Vue 中，我們的 input 字段有一個稱為 v-model 的句柄。這使我們能夠執(zhí)行稱為 雙向綁定 的操作。下面來看一下 input 字段，搞清楚到底發(fā)生了什么：

<input 
    type="text" 
    placeholder="I need to..." 
    v-model="todo" 
    v-on:keyup.enter="createNewToDoItem" 
/> 

V-Model 將這個字段的輸入與我們在 setup() 函數(shù)上創(chuàng)建的一個變量相關(guān)聯(lián)，然后公開為一個返回對象內(nèi)的鍵。到目前為止我們還沒有介紹對象返回的內(nèi)容，所以先說一下，這是我們從 ToDo.vue 內(nèi)部的 setup() 函數(shù)返回的內(nèi)容：

return { 
    list, 
    todo,    showError,    generateId,    createNewToDoItem,    onDeleteItem,    displayError}; 

這里，list、todo 和 showError 是我們的有狀態(tài)值，而其他所有內(nèi)容都是我們希望能在應(yīng)用其他位置調(diào)用的函數(shù)。在頁面加載時，我們必須將 todo 設(shè)置為一個空字符串，例如：const todo = ref("")。如果其中已經(jīng)有一些數(shù)據(jù)，例如 const todo = ref("add some text here")：我們的輸入字段將在內(nèi)部已有 add some text here 的情況下加載。不管怎樣，回到空字符串的狀態(tài)，無論我們在輸入字段中鍵入什么文本都必須綁定到 todo.value。這實際上就是雙向綁定——輸入字段可以更新 ref() 值，反過來后者也可以更新輸入字段。

回顧一下前面的 createNewToDoItem () 代碼塊，可以看到，我們將 todo.value 的內(nèi)容推送到 list 數(shù)組中，然后將前者更新為一個空字符串。

我們還使用了與 React 示例中相同的 newId() 函數(shù)。

如何從列表中刪除項目？

React：

const deleteItem = (id) => { 
    setList(list.filter((item) => item.id !== id)); 
}; 

在 React 你是怎么做的？

因為 deleteItem() 函數(shù)位于 ToDo.js 內(nèi)，我可以很容易地在 ToDoItem.js 里引用它，首先將 deleteItem () 函數(shù)作為一個 prop，如下所示：

<ToDoItem key={item.id} item={item} deleteItem={deleteItem} />

這里首先將該函數(shù)傳遞下去，使其能被子級訪問。然后在 ToDoItem 組件內(nèi)執(zhí)行以下操作：

<button className="ToDoItem-Delete" onClick={() => deleteItem(item.id)}> 
    -</button> 

我要引用位于父組件內(nèi)的函數(shù)，只需引用 props.deleteItem。你可能發(fā)現(xiàn)在代碼示例中，我們只寫了 deleteItem，而不是 props.deleteItem。這是因為我們使用了一種稱為 解構(gòu) 的技術(shù)，該技術(shù)允許我們獲取 props 對象的一部分并將其分配給變量。因此在我們的 ToDoItem.js 文件中有以下內(nèi)容：

const ToDoItem = (props) => { 
    const { item, deleteItem } = props; 
} 

這為我們創(chuàng)建了兩個變量，其中一個稱為 item，它被賦予與 props.item 相同的值，而 deleteItem 則根據(jù) props.deleteItem 賦值。我們也可以簡單地使用 props.item 和 props.deleteItem 來避免解構(gòu)的操作，但我認(rèn)為這里值得單獨介紹一下！

Vue：

function onDeleteItem(id) { 
    list.value = list.value.filter(item => item.id !== id); 
} 

在 Vue 你是怎么做的？

Vue 需要的方法稍微有一些不同。這里我們必須做三件事：

首先，在我們要調(diào)用函數(shù)元素上：

<button class="ToDoItem-Delete" @click="deleteItem(item.id)"> 
    -</button> 

然后我們必須在子組件（在本例中為 ToDoItem.vue）中創(chuàng)建一個 emit 函數(shù)作為方法，如下所示：

function deleteItem(id) { 
    emit("delete", id); 
} 

與此同時你會發(fā)現(xiàn)，當(dāng)我們在 ToDo.vue 中添加 ToDoItem.vue 時，我們實際上引用了一個 函數(shù)：

<ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" /> 

這就是所謂的自定義事件偵聽器 event-listener。它會偵聽使用字符串“delete”觸發(fā) emit 的所有情況。如果聽到此消息，它將觸發(fā)一個名為onDeleteItem 的函數(shù)。此函數(shù)位于 ToDo.vue 內(nèi)部，而不是在 ToDoItem.vue中。如前所述，此函數(shù)僅過濾來自 list.value 數(shù)組內(nèi)的 id。

在這里還需注意的是，在 Vue 示例中，我可以簡單地將 $emit 部分寫在 @click 偵聽器中，如下所示：

<buttonclass="ToDoItem-Delete"@click="emit("delete", item.id)"> 
    -</button> 

這樣就能把步驟從 3 步減少到 2 不，選哪個完全取決于個人喜好。簡而言之，React 中的子組件可以通過 props 來訪問父函數(shù)（前提是你要向下傳遞 props，這是相當(dāng)標(biāo)準(zhǔn)的做法，其他 React 工作中也非常常見）；而在 Vue 中，你需要從子級發(fā)射事件，這些事件通常會在父組件內(nèi)部回收。

怎樣傳遞事件偵聽器？

React：

針對簡單事件（例如單擊事件）的事件偵聽器很好做。下面是為創(chuàng)建新的 ToDo 項目的按鈕創(chuàng)建 click 事件的示例：

<button className="ToDo-Add"onClick={createNewToDoItem}> 
    +</button> 

這里非常簡單，和在一般的 JS 里處理內(nèi)聯(lián) onClick 差不多。如 Vue 部分所述，設(shè)置一個事件偵聽器來偵聽一下 Enter 鍵的動作有點復(fù)雜。這需要由 input 標(biāo)簽處理 onKeyPress 事件，如下：

<input 
   type="text" 
    placeholder="I need to..." 
    value={toDo} 
    onChange={handleInput} 
   onKeyPress={handleKeyPress} 
/> 

只要識別出已按下“enter”鍵，此函數(shù)就觸發(fā)了 createNewToDoItem 函數(shù)，如下：

const handleKeyPress = (e) => { 
    if (e.key === "Enter") { 
    createNewToDoItem();    }}; 

Vue： 

在 Vue 中寫起來非常直觀。我們只需使用 @符號，后面是我們想要做的事件監(jiān)聽器的類型。例如要添加一個 click 事件監(jiān)聽器，我們可以編寫以下代碼：

<button class="ToDo-Add" @click="createNewToDoItem"> 
    +</button> 

注意：@click 實際上是 v-on:click 的簡寫。Vue 事件偵聽器很好用的是你還可以綁定很多東西，例如.once，它可以防止事件偵聽器被多次觸發(fā)。在編寫處理按鍵的特定事件偵聽器時還有許多捷徑。我發(fā)現(xiàn)在 React 中創(chuàng)建一個事件偵聽器，做到每當(dāng)按下 enter 鍵就創(chuàng)建新的 ToDo 項目，寫起來比較麻煩。在 Vue 中，我只需編寫：

<input type=”text” v-on:keyup.enter=”createNewToDoItem”/> 

如何將數(shù)據(jù)傳遞給子組件？ 

React：

在 React 中，我們將 props 傳遞到子組件的創(chuàng)建位置。如：

<ToDoItem key={item.id} item={item} deleteItem={deleteItem} />; 

這里我們看到兩個傳遞給 ToDoItem 組件的 props。從這里開始，我們就可以通過 this.props 在子組件中引用它們。因此要訪問 item.todo prop 時，我們只需調(diào)用 props.item。你可能已經(jīng)注意到還有一個 key prop（因此從技術(shù)上講，我們實際上正在傳遞三個 props）。這主要用于 React 的內(nèi)部，因為它簡化了同一組件的多個版本之間更新和跟蹤更改的工作（我們這里每個 todo 是 ToDoItem 組件的一個副本）。確保你的組件具有唯一鍵也很重要，否則 React 會在控制臺中發(fā)出警告。

Vue：

在 Vue 中，我們將 props 傳遞到子組件的創(chuàng)建位置。如：

<ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" /> 

完成此操作后，我們將它們傳遞到子組件的 props 數(shù)組中，如下所示：props: [ "todo" ]。然后它們就可以在子組件中用名稱引用——這里的名稱就是 todo。如果你不知道在哪里放 prop 鍵，下面是我們的子組件中整個 export default 對象的樣子：

export default { 
    name: "ToDoItem", 
    props: ["item"], 
    setup(props, { emit }) {        function deleteItem(id) { 
        emit("delete", id); 
        }        return { 
        deleteItem,        };    },}; 

你可能注意到 Vue 中遍歷數(shù)據(jù)時，我們實際上遍歷的是 list 而非 list.value。遍歷后者這里是行不通的。

如何將數(shù)據(jù)發(fā)射回父組件？

React：

我們首先將函數(shù)向下傳遞給子組件，在調(diào)用子組件的位置將其作為 prop 引用。然后我們向子組件的函數(shù)添加調(diào)用，比如說 onClick 就引用props.whateverTheFunctionIsCalled——或者whateverTheFunctionIsCalled（如果用解構(gòu)）。然后將觸發(fā)位于父組件中的函數(shù)。我們可以在“如何從列表中刪除項目”部分中查看全過程。

Vue：

在子組件中，我們只需要編寫一個將值返回給父函數(shù)的函數(shù)即可。在父組件中我們編寫一個函數(shù)，該函數(shù)偵聽何時發(fā)射出該值，然后可以觸發(fā)一個函數(shù)調(diào)用?？梢栽?ldquo;如何從列表中刪除項目”部分中查看全過程。

終于完成了！

我們已經(jīng)研究了如何添加、刪除和更改數(shù)據(jù)，以 props 形式將數(shù)據(jù)從父級傳遞到子級，以及以事件偵聽器的形式將數(shù)據(jù)從子級發(fā)送到父級。當(dāng)然，React 和 Vue 之間還有其他許多小差異和癖好，但我希望本文的內(nèi)容有助于大家理解這兩個框架是如何處理事物的。

如果你有興趣 fork 本文中使用的樣式，并想制作自己的類似作品，請自便！

兩個應(yīng)用的 Github 鏈接

Vue ToDo：

https://github.com/sunil-sandhu/vue-todo-2020

React ToDo：

https://github.com/sunil-sandhu/react-todo-2020