對比React和Vue中創建應用的區別
React vs Vue：現在有了React Hooks Vue 3 Composition API！
React vs Vue：傳奇繼續
幾年前，我決定嘗試在React和Vue中構建一個相當標準的To Do App。 這兩個應用程序都是使用默認的CLI構建的（React的create-react-app和Vue的vue-cli）。 我的目的是編寫無偏見的內容，并提供有關如何使用這兩種技術執行某些任務的概述。
當React Hooks發布時，我在原始文章后面加上了" 2019 Edition"，該版本將Class Components的使用替換為Functional Hooks。 隨著Vue第3版及其成分API的發布，現在是時候以" 2020版"再次更新本文了。
讓我們快速看一下這兩個應用的外觀：
兩個應用程序的CSS代碼完全相同，但是它們的位置有所不同。 考慮到這一點，接下來讓我們看一下兩個應用程序的文件結構：
最終，他們倆都能達成同一目標，而且無話可說，您無法繼續在React或Vue中以不同的方式構造文件。 這實際上取決于個人喜好。 您將聽到來自開發人員社區的大量討論，關于CSS的結構，尤其是關于React的結構，因為存在許多CSS-in-JS解決方案，例如樣式組件和情感。 順便說一句，CSS-in-JS的字面意義就是這樣。 盡管這些功能很有用，但到目前為止，我們將僅遵循兩個CLI中列出的結構。
但是在進一步介紹之前，讓我們快速看一下典型的Vue和React組件的外觀：
典型的React文件：
典型的Vue文件：
既然已經解決了，讓我們深入了解細節吧！
我們如何突變數據？
但是首先，"突變數據"甚至意味著什么？ 聽起來有點技術性嗎？ 基本上，這只是意味著更改我們已存儲的數據。 因此，如果我們想將一個人的名字的值從John更改為Mark，我們將"對數據進行突變"。 因此，這就是React和Vue之間的關鍵區別所在。 雖然Vue本質上創建了一個數據對象，可以在其中自由更新數據，但是React通過狀態鉤子來處理它。
讓我們看一下下面兩個圖片中的設置，然后我們將說明發生了什么：
React狀態：
Vue狀態：
因此，您可以看到我們已經將相同的數據傳遞給了兩者，但是結構有些不同。
使用React或至少從2019年開始，我們通常會通過一系列的Hooks處理狀態。 如果您以前沒有看過這種概念，那么一開始它們可能看起來有些奇怪。 基本上，它的工作方式如下：
假設我們要創建待辦事項列表。 我們可能需要創建一個名為list的變量，它可能需要一個由字符串或對象組成的數組（例如，如果我們想給每個待辦事項字符串一個ID和其他一些東西，我們可以通過編寫const [ list，setList] = useState（[]）。這里我們使用React稱為Hook的鉤子-稱為useState。這基本上使我們可以在組件中保留局部狀態。
另外，您可能已經注意到我們在useState（）內部傳入了一個空數組[]。 我們放在其中的是我們希望列表最初設置的內容，在我們的例子中，我們希望是一個空數組。 但是，從上圖可以看到，我們在數組內部傳入了一些數據，這些數據最終是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被分配了一個函數，該函數可以使用新的名稱重新創建名稱。 值。
在Vue中，它位于setup（）函數內部，并且被稱為const name = ref（'Sunil'）。 在我們的應用程序中，我們將通過調用name.value來引用它。 使用Vue，如果我們要使用在ref（）函數內部創建的值，我們將在變量上尋找.value而不是簡單地調用該變量。 換句話說，如果我們想要一個持有狀態的變量的值，我們將尋找name.value而不是name。 如果要更新name的值，可以通過更新name.value來完成。 例如，假設我想將我的名字從Sunil更改為John。 我可以通過寫name.value =" John"來做到這一點。 我不確定自己被稱為約翰的感覺，但是嘿，事情發生了！
實際上，React和Vue在這里做著同樣的事情，即創建可以更新的數據。 每當ref（）函數內部包裝的一條數據被更新時，Vue本質上都會默認結合其自己的name和setName版本。 React要求您使用內部值調用setName（）來更新狀態，如果您試圖更新數據對象內部的值，Vue會假設您要這樣做。 那么，為什么React還要從函數中分離值呢？為什么還要使用useState（）呢？ 本質上，每當狀態改變時，React都希望能夠重新運行某些生命周期掛鉤。 在我們的示例中，如果調用setName（），React將知道某些狀態已更改，因此可以運行這些生命周期掛鉤。 如果直接改變狀態，React將不得不做更多的工作來跟蹤更改以及要運行的生命周期掛鉤等。
現在，我們已經有了一些變通的方式，讓我們通過研究如何將新項目添加到兩個"待辦事項"中來了解更多細節。
我們如何創建新的待辦事項？
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密鑰的對象，該ID密鑰具有newId的值。 它還具有一個文本鍵，該鍵將toDo中的值用作其值。 這與輸入值更改時要更新的toDo相同。
然后，我們用完setList函數，并傳入一個包含整個列表以及新創建的newToDo的數組。
如果… list位看起來很奇怪，則開頭的三個點稱為散布運算符，它基本上將列表中的所有值作為單獨的項目傳遞，而不是簡單地傳遞完整的 項目作為數組。 困惑？ 如果是這樣，我強烈建議您仔細閱讀散布，因為它很棒！
無論如何，最后我們運行setToDo（）并傳入一個空字符串。 這樣我們的輸入值為空，可以輸入新的toDos了。
Vue：
- function createNewToDoItem() {
- const newId = generateId();
- list.value.push({ id: newId, text: todo.value });
- todo.value = "";
- }
Vue是如何做的？
在Vue中，輸入字段上有一個稱為v-model的句柄。 這使我們能夠執行稱為雙向綁定的操作。 讓我們快速查看一下輸入字段，然后說明發生了什么：
- <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（"在此處添加一些文本"）：我們的輸入字段將在輸入字段內部已經添加一些文本的情況下加載。 無論如何，回到它作為一個空字符串，無論我們在輸入字段中鍵入什么文本都必須綁定到todo.value。 這實際上是雙向綁定-輸入字段可以更新ref（）值，而ref（）值可以更新輸入字段。
因此，回顧一下前面的createNewToDoItem（）代碼塊，我們看到將todo.value的內容推入列表數組-通過將todo.value推入list.value-然后將todo.value更新為空字符串。
我們還使用了與React示例中相同的newId（）函數。
我們如何從列表中刪除？
React：
- const deleteItem = (id) => {
- setList(list.filter((item) => item.id !== id));
- };
React是如何做的？
因此，盡管deleteItem（）函數位于ToDo.js內，但我很容易能夠通過首先將deleteItem（）函數作為道具傳遞給ToDoItem.js來對其進行引用：
- <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" />
這就是所謂的自定義事件偵聽器。 它會偵聽在任何情況下使用字符串" delete"觸發發射的情況。 如果聽到此消息，它將觸發一個名為onDeleteItem的函數。 此函數位于ToDo.vue內部，而不是ToDoItem.vue中。 如前所述，此函數僅從list.value數組中過濾ID。
在這里還值得注意的是，在Vue示例中，我可以簡單地將$ emit部分寫在@click監聽器中，如下所示：
- <button class="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鍵時，設置事件偵聽器進行處理就花費了更長的時間。 這本質上需要由輸入標簽處理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，它可以防止事件偵聽器被多次觸發。 在編寫用于處理按鍵的特定事件偵聽器時，還有許多捷徑。 我發現，每當按下Enter鍵時，在React中創建一個事件偵聽器以創建新的ToDo項就花費了相當長的時間。 在Vue中，我能夠簡單地編寫：
- <input type="text" v-on:keyup.enter="createNewToDoItem"/>
我們如何將數據傳遞給子組件？
反應：
在react中，我們將道具傳遞到子組件的創建位置。 如：
- <ToDoItem key={item.id} item={item} deleteItem={deleteItem} />;
在這里，我們看到兩個傳遞給ToDoItem組件的道具。 從現在開始，我們現在可以通過this.props在子組件中引用它們。 因此，要訪問item.todo prop，我們只需調用props.item。 您可能已經注意到，還有一個關鍵道具（因此從技術上講，我們實際上正在傳遞三個道具）。 這主要用于React的內部，因為它使在同一組件的多個版本之間進行更新和跟蹤更改變得容易（我們在這里擁有它，因為每個todo是ToDoItem組件的一個副本）。 確保您的組件具有唯一鍵也很重要，否則React會在控制臺中警告您。
Vue：
在Vue中，我們將道具傳遞到子組件的創建位置。 如：
- <ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" />
完成此操作后，我們將它們傳遞到子組件的props數組中，如下所示：props：[" todo"]。 然后可以通過子組件的名字在子組件中引用這些名字，因此在我們的案例中是todo。 如果您不確定該prop鍵的放置位置，則這是整個導出默認對象在子組件中的外觀：
- export default {
- name: "ToDoItem", props: ["item"], setup(props, { emit }) {
- function deleteItem(id) {
- emit("delete", id);
- }
- return { deleteItem, };
- },
- };
您可能已經注意到的一件事是，當在Vue中遍歷數據時，我們實際上只是遍歷了list而不是list.value。 嘗試遍歷list.value在這里行不通
我們如何將數據發送回父組件？
React：
首先，通過在調用子組件的地方將其作為道具引用，將函數傳遞給子組件。 然后，通過引用props.whateverTheFunctionIsCalled（如果使用了解構）或whatTheFunctionIsCalled，可以通過諸如onClick之類的任何方式在子元素上添加對函數的調用。 然后，這將觸發位于父組件中的函數。 我們可以在"我們如何從列表中刪除"部分中看到整個過程的示例。
Vue：
在子組件中，我們只編寫了一個將值返回給父函數的函數。 在父組件中，我們編寫了一個函數，該函數偵聽何時發出該值，然后可以觸發函數調用。 我們可以在"我們如何從列表中刪除"部分中看到整個過程的示例。
我們終于得到它了！
我們已經研究了如何添加，刪除和更改數據，以道具形式將數據從父級傳遞到子級，以及以事件偵聽器的形式將數據從子級發送到父級。 當然，React和Vue之間還有許多其他的小差異和怪異之處，但是希望本文的內容有助于為理解這兩個框架如何處理事物奠定基礎。
如果您有興趣分叉本文中使用的樣式，并想制作自己的同等作品，請隨時這樣做！
Github鏈接到兩個應用程序：
Vue待辦事項：https://github.com/sunil-sandhu/vue-todo-2020
React待辦事項：https://github.com/sunil-sandhu/react-todo-2020
最初發布于：sunilsandhu.com
