前言

幾年前，我決定試著分別在 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 是做什麼的？稍後會進一步說明！

如何在應用中引用突變資料？

假設我們有一些資料名為 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() 函式返回的內容：

回顧一下前面的 createNewToDoItem () 程式碼塊，可以看到，我們將 todo.value 的內容推送到 list 陣列中，然後將前者更新為一個空字串。

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

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