我用React和Vue構建了同款應用，對比看看
前言
幾年前，我決定試著分別在 React 和 Vue 中構建一個相當標準的 To Do（待辦事項）應用。這兩個應用都是使用默認的 CLI 構建的（React 的 create-react-app 和 Vue 的 vue-cli）。我想盡量保持中立，通過這樣的例子來告訴大家這兩種技術執行特定任務是是怎樣做的。
當 React Hooks 發布時，我為這篇文章更新了“2019 版”，用函數式 Hooks 取代了類組件。隨著 Vue 3 及其組合（Composition）API 的發布，現在是時候更新這篇文章的“2020 版”了。
2019 版：我用 React 和 Vue 構建了同款應用，來看看哪里不一樣
先來大致看一下兩款應用的外觀：
兩款應用的 CSS 代碼完全相同，但代碼所處的位置有所不同。記住這一點，接下來讓我們看一下它們的文件結構：
你會發現它們的結構也幾乎相同。唯一的區別是 React 應用有兩個 CSS 文件，而 Vue 應用沒有任何 CSS 文件。這是因為在 create-react-app 中，默認每個 React 組件都會附帶一個單獨文件來保存其樣式，而 Vue CLI 用單一的文件來為默認組件包含 HTML、CSS 和 JavaScript。
最后它們倆都達成了同樣的目標，也沒什么可多說的，因為在 React 或 Vue 中你都不能改變文件結構。選擇哪個確實取決于個人喜好。開發社區關于 CSS 的結構化方式這個話題有大量的討論，尤其是 React 這塊，因為有許多 CSS-in-JS 解決方案，諸如樣式化組件和 emotion 等。順便說一句，CSS-in-JS 就是字面上的意思。雖然這些都很有用，但這里我們只用兩邊的 CLI 給出的結構。
在進一步深入之前，我們先來看一下典型的 Vue 和 React 組件長什么樣：
典型的 React 文件：
典型的 Vue 文件：
看過之后我們來深入了解細節吧！
我們如何突變數據？
首先，“突變數據”到底是什么意思呢？聽起來是不是有點高深？其實它基本上就是指更改我們已存儲的數據。如果我們想將一個人名的值從 John 更改為 Mark，我們就是在“突變“這份數據。這就是 React 和 Vue 之間的關鍵區別所在。Vue 本質上創建了一個數據對象，可以在其中自由更新數據，而 React 通過所謂的狀態 Hook 來處理數據突變。
從下面的圖片中可以看到兩者的設置，然后我們會具體說明：
React 狀態：
Vue 狀態：
于是你看到我們將相同的數據傳遞給了兩者，但各自的結構有所不同。
在 React 中，至少從 2019 年開始，我們一般會通過一系列 Hooks 處理狀態。你可能以前沒接觸過這種概念，一開始它看起來可能有點奇怪。它的工作機制基本上是這個樣子：
假設我們要創建一個待辦事項列表，我們可能需要創建一個名為 list 的變量，它可能需要接收一個由字符串或對象組成的數組（比如說給每個 todo 字符串一個 ID 或其他一些東西）。我們需要寫的代碼是const [list, setList] = useState([])。這里我們用的就是 React 里面的 Hook，稱為 useState。它本質上是讓我們能夠在組件中保留局部狀態。
另外，你可能已經注意到我們在 useState() 內部傳入了一個空數組 []。放在其中的是我們希望 list 最初設置的內容，這里我們希望是一個空數組。但從上圖可以看到，我們在數組內傳入了一些數據，這些數據最后成了 list 的初始化數據。想知道 setList 是做什么的？稍后會進一步說明！
在 Vue 中，通常會將組件的所有突變數據放置在一個 setup() 函數內，該函數返回一個對象，其中包含要公開的數據和函數（就是那些你要在應用中使用的東西）。你會注意到，應用中的每個狀態數據（也就是我們希望能夠突變的數據）都包裝在一個 ref() 函數內部。這個 ref() 函數是我們從 Vue 導入的，可讓我們的應用在這些數據更改 / 更新時完成更新。簡而言之，如果你想在 Vue 中創建突變數據，請為 ref() 函數分配一個變量，并在其中放入默認數據。
如何在應用中引用突變數據？
假設我們有一些數據名為 name，被分配了 Sunil 值。
在 React 中，由于我們使用 useState() 創建了較小的狀態，因此很可能已經用const [name, setName] = useState('Sunil')創建了一些東西。在應用中，我們將簡單地調用 name 來引用同一段數據。這里的主要區別在于我們不能簡單地寫上name = 'John'，因為 React 有一些限制來預防這種簡單且無所顧忌的突變。在 React 中，我們要寫成setName('John')。這里用到了 setName。在const [name, setName] = useState('Sunil')中，它創建兩個變量，一個變量變為const name = 'Sunil'，而第二個 const setName 被分配了一個函數，該函數使 name 可以用新值重新創建。
在 Vue 中，它位于 setup() 函數內部，并且被稱為const name = ref('Sunil')。在應用中，我們將調用 name.value 來引用它。如果要使用在 ref() 函數內部創建的值，我們將在變量上尋找.value 而不是簡單地調用該變量。換句話說，如果我們想要一個持有狀態的變量值，我們將尋找 name.value 而不是 name。如果要更新 name 的值，可以通過更新 name.value 來完成。例如，假設我想將我的名字從 Sunil 更改為 John, 可以寫name.value = "John"來做到這一點。
實際上，React 和 Vue 在這里做的是同樣的事情，也就是創建可以更新的數據。Vue 本質上會在每次更新一條包裝在 ref() 函數內的數據是默認結合它自己的 name 和 setName 版本。React 要求你使用內部值調用 setName() 來更新狀態，而如果你曾嘗試更新數據對象內部的值，Vue 就會假設你要這么做。那么為什么 React 會費勁地將值與函數分開，還要使用 useState() 呢？這是因為當狀態改變時，React 希望重新運行某些生命周期 Hooks。在我們的例子中，當你調用 setName() 時，React 會知道有些狀態已更改，所以可以運行它們的生命周期 Hooks。如果你直接改變狀態，React 將不得不做更多的工作來跟蹤更改以及要運行的生命周期 Hooks 等。
現在我們已經搞明白了數據突變，接下來看看在兩個 To Do 應用中添加新項目的方法。
我們如何創建新的待辦事項？
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}
- />
每次更改值時，它都會更新狀態。handleInput 函數如下所示：
- const handleInput = (e) => {
- setToDo(e.target.value);};
現在，每當用戶按下頁面上的 + 按鈕添加新項目時，都會觸發createNewToDoItem 函數。我們再來看一下這個函數，搞清楚具體發生了什么：
- const createNewToDoItem = () => {
- const newId = generateId();
- const newToDo = { id: newId, text: toDo };
- setList([...list, newToDo]); setToDo("");
- };
本質上，newId 函數是在創建一個新 ID，該 ID 將提供給我們的新 toDo 項目。newToDo 變量是一個對象，有一個 id 鍵，其值由 newID 確定。它還有一個 text 鍵，其值由 toDo 確定。這個 toDo 就是輸入值更改時要更新的那個 toDo。
setList 函數到此為止，然后我們傳入一個包含整個 list 以及新創建的 newToDo 的數組。
你可能覺得…list 看起來很奇怪：開頭的三個點稱為 spread 運算符，負責將 list 中的所有值作為單獨的項目傳遞，而不是簡單地把所有項目打包在一起作為數組傳遞。感覺有些糊涂嗎？那我強烈建議你仔細閱讀 spread 運算符的相關介紹，因為它很有用！
最后我們運行 setToDo() 并傳入一個空字符串。這樣我們的輸入值為空，可以輸入新的 toDo 了。
Vue：
- function createNewToDoItem() {
- const newId = generateId();
- list.value.push({ id: newId, text: todo.value });
- todo.value = "";
- }
在 Vue 你是怎么做的？
在 Vue 中，我們的 input 字段有一個稱為 v-model 的句柄。這使我們能夠執行稱為 雙向綁定 的操作。下面來看一下 input 字段，搞清楚到底發生了什么：
- <input
- type="text"
- placeholder="I need to..."
- v-model="todo"
- v-on:keyup.enter="createNewToDoItem"
- />
V-Model 將這個字段的輸入與我們在 setup() 函數上創建的一個變量相關聯，然后公開為一個返回對象內的鍵。到目前為止我們還沒有介紹對象返回的內容，所以先說一下，這是我們從 ToDo.vue 內部的 setup() 函數返回的內容：
- return {
- list,
- todo, showError, generateId, createNewToDoItem, onDeleteItem, displayError};
這里，list、todo 和 showError 是我們的有狀態值，而其他所有內容都是我們希望能在應用其他位置調用的函數。在頁面加載時，我們必須將 todo 設置為一個空字符串，例如：const todo = ref("")。如果其中已經有一些數據，例如 const todo = ref("add some text here")：我們的輸入字段將在內部已有 add some text here 的情況下加載。不管怎樣，回到空字符串的狀態，無論我們在輸入字段中鍵入什么文本都必須綁定到 todo.value。這實際上就是雙向綁定——輸入字段可以更新 ref() 值，反過來后者也可以更新輸入字段。
回顧一下前面的 createNewToDoItem () 代碼塊，可以看到，我們將 todo.value 的內容推送到 list 數組中，然后將前者更新為一個空字符串。
我們還使用了與 React 示例中相同的 newId() 函數。
如何從列表中刪除項目？
React：
- const deleteItem = (id) => {
- setList(list.filter((item) => item.id !== id));
- };
在 React 你是怎么做的？
因為 deleteItem() 函數位于 ToDo.js 內，我可以很容易地在 ToDoItem.js 里引用它，首先將 deleteItem () 函數作為一個 prop，如下所示：
<ToDoItem key={item.id} item={item} deleteItem={deleteItem} />這里首先將該函數傳遞下去，使其能被子級訪問。然后在 ToDoItem 組件內執行以下操作：
- <button className="ToDoItem-Delete" onClick={() => deleteItem(item.id)}>
- -</button>
我要引用位于父組件內的函數，只需引用 props.deleteItem。你可能發現在代碼示例中，我們只寫了 deleteItem，而不是 props.deleteItem。這是因為我們使用了一種稱為 解構 的技術，該技術允許我們獲取 props 對象的一部分并將其分配給變量。因此在我們的 ToDoItem.js 文件中有以下內容：
- const ToDoItem = (props) => {
- const { item, deleteItem } = props;
- }
這為我們創建了兩個變量，其中一個稱為 item，它被賦予與 props.item 相同的值，而 deleteItem 則根據 props.deleteItem 賦值。我們也可以簡單地使用 props.item 和 props.deleteItem 來避免解構的操作，但我認為這里值得單獨介紹一下！
Vue：
- function onDeleteItem(id) {
- list.value = list.value.filter(item => item.id !== id);
- }
在 Vue 你是怎么做的？
Vue 需要的方法稍微有一些不同。這里我們必須做三件事：
首先，在我們要調用函數元素上：
- <button class="ToDoItem-Delete" @click="deleteItem(item.id)">
- -</button>
然后我們必須在子組件（在本例中為 ToDoItem.vue）中創建一個 emit 函數作為方法，如下所示：
- function deleteItem(id) {
- emit("delete", id);
- }
與此同時你會發現，當我們在 ToDo.vue 中添加 ToDoItem.vue 時，我們實際上引用了一個 函數：
- <ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" />
這就是所謂的自定義事件偵聽器 event-listener。它會偵聽使用字符串“delete”觸發 emit 的所有情況。如果聽到此消息，它將觸發一個名為onDeleteItem 的函數。此函數位于 ToDo.vue 內部，而不是在 ToDoItem.vue中。如前所述，此函數僅過濾來自 list.value 數組內的 id。
在這里還需注意的是，在 Vue 示例中，我可以簡單地將 $emit 部分寫在 @click 偵聽器中，如下所示：
- <buttonclass="ToDoItem-Delete"@click="emit("delete", item.id)">
- -</button>
這樣就能把步驟從 3 步減少到 2 不，選哪個完全取決于個人喜好。簡而言之，React 中的子組件可以通過 props 來訪問父函數（前提是你要向下傳遞 props，這是相當標準的做法，其他 React 工作中也非常常見）；而在 Vue 中，你需要從子級發射事件，這些事件通常會在父組件內部回收。
怎樣傳遞事件偵聽器？
React：
針對簡單事件（例如單擊事件）的事件偵聽器很好做。下面是為創建新的 ToDo 項目的按鈕創建 click 事件的示例：
- <button className="ToDo-Add"onClick={createNewToDoItem}>
- +</button>
這里非常簡單，和在一般的 JS 里處理內聯 onClick 差不多。如 Vue 部分所述，設置一個事件偵聽器來偵聽一下 Enter 鍵的動作有點復雜。這需要由 input 標簽處理 onKeyPress 事件，如下：
- <input
- type="text"
- placeholder="I need to..."
- value={toDo}
- onChange={handleInput}
- onKeyPress={handleKeyPress}
- />
只要識別出已按下“enter”鍵，此函數就觸發了 createNewToDoItem 函數，如下：
- const handleKeyPress = (e) => {
- if (e.key === "Enter") {
- createNewToDoItem(); }};
Vue：
在 Vue 中寫起來非常直觀。我們只需使用 @符號，后面是我們想要做的事件監聽器的類型。例如要添加一個 click 事件監聽器，我們可以編寫以下代碼：
- <button class="ToDo-Add" @click="createNewToDoItem">
- +</button>
注意：@click 實際上是 v-on:click 的簡寫。Vue 事件偵聽器很好用的是你還可以綁定很多東西，例如.once，它可以防止事件偵聽器被多次觸發。在編寫處理按鍵的特定事件偵聽器時還有許多捷徑。我發現在 React 中創建一個事件偵聽器，做到每當按下 enter 鍵就創建新的 ToDo 項目，寫起來比較麻煩。在 Vue 中，我只需編寫：
- <input type=”text” v-on:keyup.enter=”createNewToDoItem”/>
如何將數據傳遞給子組件？
React：
在 React 中，我們將 props 傳遞到子組件的創建位置。如：
- <ToDoItem key={item.id} item={item} deleteItem={deleteItem} />;
這里我們看到兩個傳遞給 ToDoItem 組件的 props。從這里開始，我們就可以通過 this.props 在子組件中引用它們。因此要訪問 item.todo prop 時，我們只需調用 props.item。你可能已經注意到還有一個 key prop（因此從技術上講，我們實際上正在傳遞三個 props）。這主要用于 React 的內部，因為它簡化了同一組件的多個版本之間更新和跟蹤更改的工作（我們這里每個 todo 是 ToDoItem 組件的一個副本）。確保你的組件具有唯一鍵也很重要，否則 React 會在控制臺中發出警告。
Vue：
在 Vue 中，我們將 props 傳遞到子組件的創建位置。如：
- <ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" />
完成此操作后，我們將它們傳遞到子組件的 props 數組中，如下所示：props: [ "todo" ]。然后它們就可以在子組件中用名稱引用——這里的名稱就是 todo。如果你不知道在哪里放 prop 鍵，下面是我們的子組件中整個 export default 對象的樣子：
- export default {
- name: "ToDoItem",
- props: ["item"],
- setup(props, { emit }) { function deleteItem(id) {
- emit("delete", id);
- } return {
- deleteItem, }; },};
你可能注意到 Vue 中遍歷數據時，我們實際上遍歷的是 list 而非 list.value。遍歷后者這里是行不通的。
如何將數據發射回父組件？
React：
我們首先將函數向下傳遞給子組件，在調用子組件的位置將其作為 prop 引用。然后我們向子組件的函數添加調用，比如說 onClick 就引用props.whateverTheFunctionIsCalled——或者whateverTheFunctionIsCalled（如果用解構）。然后將觸發位于父組件中的函數。我們可以在“如何從列表中刪除項目”部分中查看全過程。
Vue：
在子組件中，我們只需要編寫一個將值返回給父函數的函數即可。在父組件中我們編寫一個函數，該函數偵聽何時發射出該值，然后可以觸發一個函數調用。可以在“如何從列表中刪除項目”部分中查看全過程。
終于完成了！
我們已經研究了如何添加、刪除和更改數據，以 props 形式將數據從父級傳遞到子級，以及以事件偵聽器的形式將數據從子級發送到父級。當然，React 和 Vue 之間還有其他許多小差異和癖好，但我希望本文的內容有助于大家理解這兩個框架是如何處理事物的。
如果你有興趣 fork 本文中使用的樣式，并想制作自己的類似作品，請自便！
兩個應用的 Github 鏈接
Vue ToDo：
https://github.com/sunil-sandhu/vue-todo-2020
React ToDo：
https://github.com/sunil-sandhu/react-todo-2020
