對(duì)比React和Vue中創(chuàng)建應(yīng)用的區(qū)別
React vs Vue：現(xiàn)在有了React Hooks Vue 3 Composition API！
React vs Vue：傳奇繼續(xù)
幾年前，我決定嘗試在React和Vue中構(gòu)建一個(gè)相當(dāng)標(biāo)準(zhǔn)的To Do App。 這兩個(gè)應(yīng)用程序都是使用默認(rèn)的CLI構(gòu)建的（React的create-react-app和Vue的vue-cli）。 我的目的是編寫無偏見的內(nèi)容，并提供有關(guān)如何使用這兩種技術(shù)執(zhí)行某些任務(wù)的概述。
當(dāng)React Hooks發(fā)布時(shí)，我在原始文章后面加上了" 2019 Edition"，該版本將Class Components的使用替換為Functional Hooks。 隨著Vue第3版及其成分API的發(fā)布，現(xiàn)在是時(shí)候以" 2020版"再次更新本文了。
讓我們快速看一下這兩個(gè)應(yīng)用的外觀：
兩個(gè)應(yīng)用程序的CSS代碼完全相同，但是它們的位置有所不同。 考慮到這一點(diǎn)，接下來讓我們看一下兩個(gè)應(yīng)用程序的文件結(jié)構(gòu)：
最終，他們倆都能達(dá)成同一目標(biāo)，而且無話可說，您無法繼續(xù)在React或Vue中以不同的方式構(gòu)造文件。 這實(shí)際上取決于個(gè)人喜好。 您將聽到來自開發(fā)人員社區(qū)的大量討論，關(guān)于CSS的結(jié)構(gòu)，尤其是關(guān)于React的結(jié)構(gòu)，因?yàn)榇嬖谠S多CSS-in-JS解決方案，例如樣式組件和情感。 順便說一句，CSS-in-JS的字面意義就是這樣。 盡管這些功能很有用，但到目前為止，我們將僅遵循兩個(gè)CLI中列出的結(jié)構(gòu)。
但是在進(jìn)一步介紹之前，讓我們快速看一下典型的Vue和React組件的外觀：
典型的React文件：
典型的Vue文件：
既然已經(jīng)解決了，讓我們深入了解細(xì)節(jié)吧！
我們?nèi)绾瓮蛔償?shù)據(jù)？
但是首先，"突變數(shù)據(jù)"甚至意味著什么？ 聽起來有點(diǎn)技術(shù)性嗎？ 基本上，這只是意味著更改我們已存儲(chǔ)的數(shù)據(jù)。 因此，如果我們想將一個(gè)人的名字的值從John更改為Mark，我們將"對(duì)數(shù)據(jù)進(jìn)行突變"。 因此，這就是React和Vue之間的關(guān)鍵區(qū)別所在。 雖然Vue本質(zhì)上創(chuàng)建了一個(gè)數(shù)據(jù)對(duì)象，可以在其中自由更新數(shù)據(jù)，但是React通過狀態(tài)鉤子來處理它。
讓我們看一下下面兩個(gè)圖片中的設(shè)置，然后我們將說明發(fā)生了什么：
React狀態(tài)：
Vue狀態(tài)：
因此，您可以看到我們已經(jīng)將相同的數(shù)據(jù)傳遞給了兩者，但是結(jié)構(gòu)有些不同。
使用React或至少從2019年開始，我們通常會(huì)通過一系列的Hooks處理狀態(tài)。 如果您以前沒有看過這種概念，那么一開始它們可能看起來有些奇怪。 基本上，它的工作方式如下：
假設(shè)我們要?jiǎng)?chuàng)建待辦事項(xiàng)列表。 我們可能需要?jiǎng)?chuàng)建一個(gè)名為list的變量，它可能需要一個(gè)由字符串或?qū)ο蠼M成的數(shù)組（例如，如果我們想給每個(gè)待辦事項(xiàng)字符串一個(gè)ID和其他一些東西，我們可以通過編寫const [ list，setList] = useState（[]）。這里我們使用React稱為Hook的鉤子-稱為useState。這基本上使我們可以在組件中保留局部狀態(tài)。
另外，您可能已經(jīng)注意到我們?cè)趗seState（）內(nèi)部傳入了一個(gè)空數(shù)組[]。 我們放在其中的是我們希望列表最初設(shè)置的內(nèi)容，在我們的例子中，我們希望是一個(gè)空數(shù)組。 但是，從上圖可以看到，我們?cè)跀?shù)組內(nèi)部傳入了一些數(shù)據(jù)，這些數(shù)據(jù)最終是list的初始化數(shù)據(jù)。 想知道setList是做什么的？ 稍后將對(duì)此進(jìn)行更多說明！
在Vue中，通常會(huì)將組件的所有可變數(shù)據(jù)放置在setup（）函數(shù)內(nèi)，該函數(shù)返回一個(gè)對(duì)象，其中包含要公開的數(shù)據(jù)和函數(shù)（這基本上意味著您希望能夠使用的東西） 在您的應(yīng)用中使用）。 您會(huì)注意到，應(yīng)用程序中的每個(gè)狀態(tài)數(shù)據(jù)（也就是我們希望能夠進(jìn)行突變的數(shù)據(jù)）都包裝在ref（）函數(shù)內(nèi)部。 此ref（）函數(shù)是我們從Vue導(dǎo)入的，可讓我們的應(yīng)用程序在任何更改或更新這些數(shù)據(jù)時(shí)都可以更新。 簡(jiǎn)而言之，如果您想在Vue中創(chuàng)建可變數(shù)據(jù)，請(qǐng)為ref（）函數(shù)分配一個(gè)變量，并將任何默認(rèn)數(shù)據(jù)放入其中。
那么我們?nèi)绾卧谖覀兊膽?yīng)用程序中引用可變數(shù)據(jù)呢？
好吧，假設(shè)我們有一些名為name的數(shù)據(jù)被分配了Sunil的值。
在React中，由于我們使用useState（）創(chuàng)建了較小的狀態(tài)，因此很可能已經(jīng)按照const [name，setName] = useState（'Sunil'）的方式創(chuàng)建了一些東西。 在我們的應(yīng)用程序中，我們將通過簡(jiǎn)單地調(diào)用name來引用相同的數(shù)據(jù)。 現(xiàn)在，這里的主要區(qū)別在于我們不能簡(jiǎn)單地寫上name ='John'，因?yàn)镽eact有適當(dāng)?shù)南拗苼矸乐惯@種簡(jiǎn)單，隨意的突變產(chǎn)生。 因此，在React中，我們將編寫setName（'John'）。 這是setName位起作用的地方。 基本上，在const [name，setName] = useState（'Sunil'）中，它將創(chuàng)建兩個(gè)變量，一個(gè)變量將成為const name ='Sunil'，而第二個(gè)const setName被分配了一個(gè)函數(shù)，該函數(shù)可以使用新的名稱重新創(chuàng)建名稱。 值。
在Vue中，它位于setup（）函數(shù)內(nèi)部，并且被稱為const name = ref（'Sunil'）。 在我們的應(yīng)用程序中，我們將通過調(diào)用name.value來引用它。 使用Vue，如果我們要使用在ref（）函數(shù)內(nèi)部創(chuàng)建的值，我們將在變量上尋找.value而不是簡(jiǎn)單地調(diào)用該變量。 換句話說，如果我們想要一個(gè)持有狀態(tài)的變量的值，我們將尋找name.value而不是name。 如果要更新name的值，可以通過更新name.value來完成。 例如，假設(shè)我想將我的名字從Sunil更改為John。 我可以通過寫name.value =" John"來做到這一點(diǎn)。 我不確定自己被稱為約翰的感覺，但是嘿，事情發(fā)生了！
實(shí)際上，React和Vue在這里做著同樣的事情，即創(chuàng)建可以更新的數(shù)據(jù)。 每當(dāng)ref（）函數(shù)內(nèi)部包裝的一條數(shù)據(jù)被更新時(shí)，Vue本質(zhì)上都會(huì)默認(rèn)結(jié)合其自己的name和setName版本。 React要求您使用內(nèi)部值調(diào)用setName（）來更新狀態(tài)，如果您試圖更新數(shù)據(jù)對(duì)象內(nèi)部的值，Vue會(huì)假設(shè)您要這樣做。 那么，為什么React還要從函數(shù)中分離值呢？為什么還要使用useState（）呢？ 本質(zhì)上，每當(dāng)狀態(tài)改變時(shí)，React都希望能夠重新運(yùn)行某些生命周期掛鉤。 在我們的示例中，如果調(diào)用setName（），React將知道某些狀態(tài)已更改，因此可以運(yùn)行這些生命周期掛鉤。 如果直接改變狀態(tài)，React將不得不做更多的工作來跟蹤更改以及要運(yùn)行的生命周期掛鉤等。
現(xiàn)在，我們已經(jīng)有了一些變通的方式，讓我們通過研究如何將新項(xiàng)目添加到兩個(gè)"待辦事項(xiàng)"中來了解更多細(xì)節(jié)。
我們?nèi)绾蝿?chuàng)建新的待辦事項(xiàng)？
React：
- const createNewToDoItem = () => {
- const newId = generateId();
- const newToDo = { id: newId, text: toDo };
- setList([...list, newToDo]);
- setToDo("");
- };
React是如何做的？
在React中，我們的輸入字段具有一個(gè)名為value的屬性。 每次通過onChange事件偵聽器更改其值時(shí)，都會(huì)自動(dòng)更新此值。 JSX（基本上是HTML的變體）如下所示：
- <input type="text" placeholder="I need to..." value={toDo} onChange={handleInput} onKeyPress={handleKeyPress}/>
因此，每次更改值時(shí)，它都會(huì)更新狀態(tài)。 handleInput函數(shù)如下所示：
- const handleInput = (e) => {
- setToDo(e.target.value);
- };
現(xiàn)在，每當(dāng)用戶按下頁面上的+按鈕添加新項(xiàng)目時(shí)，都會(huì)觸發(fā)createNewToDoItem函數(shù)。 讓我們?cè)俅慰匆幌略摴δ埽粤私獍l(fā)生了什么：
- const createNewToDoItem = () => {
- const newId = generateId();
- const newToDo = { id: newId, text: toDo };
- setList([...list, newToDo]);
- setToDo("");
- };
本質(zhì)上，newId函數(shù)基本上是在創(chuàng)建一個(gè)新ID，該ID將提供給我們的新toDo項(xiàng)。 newToDo變量是一個(gè)具有ID密鑰的對(duì)象，該ID密鑰具有newId的值。 它還具有一個(gè)文本鍵，該鍵將toDo中的值用作其值。 這與輸入值更改時(shí)要更新的toDo相同。
然后，我們用完setList函數(shù)，并傳入一個(gè)包含整個(gè)列表以及新創(chuàng)建的newToDo的數(shù)組。
如果… list位看起來很奇怪，則開頭的三個(gè)點(diǎn)稱為散布運(yùn)算符，它基本上將列表中的所有值作為單獨(dú)的項(xiàng)目傳遞，而不是簡(jiǎn)單地傳遞完整的 項(xiàng)目作為數(shù)組。 困惑？ 如果是這樣，我強(qiáng)烈建議您仔細(xì)閱讀散布，因?yàn)樗馨簦?/p>
無論如何，最后我們運(yùn)行setToDo（）并傳入一個(gè)空字符串。 這樣我們的輸入值為空，可以輸入新的toDos了。
Vue：
- function createNewToDoItem() {
- const newId = generateId();
- list.value.push({ id: newId, text: todo.value });
- todo.value = "";
- }
Vue是如何做的？
在Vue中，輸入字段上有一個(gè)稱為v-model的句柄。 這使我們能夠執(zhí)行稱為雙向綁定的操作。 讓我們快速查看一下輸入字段，然后說明發(fā)生了什么：
- <input type="text" placeholder="I need to..." v-model="todo" v-on:keyup.enter="createNewToDoItem"/>
V-Model將該字段的輸入與我們?cè)趕etup（）函數(shù)頂部創(chuàng)建的變量綁定在一起，然后將其作為鍵公開給我們返回的對(duì)象。 到目前為止，我們還沒有介紹對(duì)象返回的內(nèi)容，因此，對(duì)于您的信息，這是我們從ToDo.vue內(nèi)部的setup（）函數(shù)返回的內(nèi)容：
- return { list, todo, showError, generateId, createNewToDoItem, onDeleteItem, displayError};
這里，list，todo和showError是我們的有狀態(tài)值，而其他所有功能都是我們希望能夠在應(yīng)用程序其他位置調(diào)用的函數(shù)。 好的，從切線返回，當(dāng)頁面加載時(shí)，我們必須將todo設(shè)置為空字符串，例如：const todo = ref（""）。 如果這里已經(jīng)有一些數(shù)據(jù)，例如const todo = ref（"在此處添加一些文本"）：我們的輸入字段將在輸入字段內(nèi)部已經(jīng)添加一些文本的情況下加載。 無論如何，回到它作為一個(gè)空字符串，無論我們?cè)谳斎胱侄沃墟I入什么文本都必須綁定到todo.value。 這實(shí)際上是雙向綁定-輸入字段可以更新ref（）值，而ref（）值可以更新輸入字段。
因此，回顧一下前面的createNewToDoItem（）代碼塊，我們看到將todo.value的內(nèi)容推入列表數(shù)組-通過將todo.value推入list.value-然后將todo.value更新為空字符串。
我們還使用了與React示例中相同的newId（）函數(shù)。
我們?nèi)绾螐牧斜碇袆h除？
React：
- const deleteItem = (id) => {
- setList(list.filter((item) => item.id !== id));
- };
React是如何做的？
因此，盡管deleteItem（）函數(shù)位于ToDo.js內(nèi)，但我很容易能夠通過首先將deleteItem（）函數(shù)作為道具傳遞給ToDoItem.js來對(duì)其進(jìn)行引用：
- <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。 現(xiàn)在您可能已經(jīng)注意到，在代碼示例中，我們只是編寫了deleteItem而不是props.deleteItem。 這是因?yàn)槲覀兪褂昧艘环N稱為解構(gòu)的技術(shù)，該技術(shù)允許我們獲取props對(duì)象的一部分并將其分配給變量。 因此，在我們的ToDoItem.js文件中，我們具有以下內(nèi)容：
- const ToDoItem = (props) => {
- const { item, deleteItem } = props;
- }
這為我們創(chuàng)建了兩個(gè)變量，一個(gè)稱為item，它被分配與props.item相同的值，另一個(gè)是deleteItem，它從props.deleteItem分配了值。 我們本可以通過僅使用props.item和props.deleteItem來避免整個(gè)破壞性的事情，但是我認(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)建一個(gè)emit函數(shù)作為方法，如下所示：
- function deleteItem(id) { emit("delete", id);}
同時(shí)，您會(huì)注意到，當(dāng)我們?cè)赥oDo.vue中添加ToDoItem.vue時(shí)，我們實(shí)際上引用了一個(gè)函數(shù)：
- <ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" />
這就是所謂的自定義事件偵聽器。 它會(huì)偵聽在任何情況下使用字符串" delete"觸發(fā)發(fā)射的情況。 如果聽到此消息，它將觸發(fā)一個(gè)名為onDeleteItem的函數(shù)。 此函數(shù)位于ToDo.vue內(nèi)部，而不是ToDoItem.vue中。 如前所述，此函數(shù)僅從list.value數(shù)組中過濾ID。
在這里還值得注意的是，在Vue示例中，我可以簡(jiǎn)單地將$ emit部分寫在@click監(jiān)聽器中，如下所示：
- <button class="ToDoItem-Delete" @click="emit("delete", item.id)"> -</button>
這將使步數(shù)從3減少到2，而這完全取決于個(gè)人喜好。
簡(jiǎn)而言之，React中的子組件可以通過props來訪問父函數(shù)（前提是您要傳遞props，這是相當(dāng)標(biāo)準(zhǔn)的做法，在其他React示例中，您會(huì)遇到大量的工作），而在Vue中，您可以 從孩子發(fā)出事件，通常將其收集在父組件中。
我們?nèi)绾蝹鬟f事件監(jiān)聽器？
React：
簡(jiǎn)單事件（例如單擊事件）的事件偵聽器很簡(jiǎn)單。 這是我們?nèi)绾螢閯?chuàng)建新的ToDo項(xiàng)目的按鈕創(chuàng)建click事件的示例：
- <button className="ToDo-Add" onClick={createNewToDoItem}> +</button>
在這里超級(jí)簡(jiǎn)單，幾乎就像我們將如何使用香草JS處理嵌入式onClick。 如Vue部分所述，每當(dāng)按下Enter鍵時(shí)，設(shè)置事件偵聽器進(jìn)行處理就花費(fèi)了更長(zhǎng)的時(shí)間。 這本質(zhì)上需要由輸入標(biāo)簽處理onKeyPress事件，例如：
- <input type="text" placeholder="I need to..." value={toDo} onChange={handleInput} onKeyPress={handleKeyPress}/>
只要該函數(shù)識(shí)別出已按下" enter"鍵，便會(huì)觸發(fā)createNewToDoItem函數(shù)，例如：
- const handleKeyPress = (e) => {
- if (e.key === "Enter") {
- createNewToDoItem();
- }
- };
Vue：
在Vue中，它非常簡(jiǎn)單明了。 我們只使用@符號(hào)，然后使用我們想要做的事件監(jiān)聽器的類型。 因此，例如，要添加一個(gè)click事件監(jiān)聽器，我們可以編寫以下代碼：
- <button class="ToDo-Add" @click="createNewToDoItem"> +</button>
注意：@click實(shí)際上是編寫v-on：click的簡(jiǎn)寫。 Vue事件偵聽器很酷的事情是，您還可以綁定很多東西，例如.once，它可以防止事件偵聽器被多次觸發(fā)。 在編寫用于處理按鍵的特定事件偵聽器時(shí)，還有許多捷徑。 我發(fā)現(xiàn)，每當(dāng)按下Enter鍵時(shí)，在React中創(chuàng)建一個(gè)事件偵聽器以創(chuàng)建新的ToDo項(xiàng)就花費(fèi)了相當(dāng)長(zhǎng)的時(shí)間。 在Vue中，我能夠簡(jiǎn)單地編寫：
- <input type="text" v-on:keyup.enter="createNewToDoItem"/>
我們?nèi)绾螌?shù)據(jù)傳遞給子組件？
反應(yīng)：
在react中，我們將道具傳遞到子組件的創(chuàng)建位置。 如：
- <ToDoItem key={item.id} item={item} deleteItem={deleteItem} />;
在這里，我們看到兩個(gè)傳遞給ToDoItem組件的道具。 從現(xiàn)在開始，我們現(xiàn)在可以通過this.props在子組件中引用它們。 因此，要訪問item.todo prop，我們只需調(diào)用props.item。 您可能已經(jīng)注意到，還有一個(gè)關(guān)鍵道具（因此從技術(shù)上講，我們實(shí)際上正在傳遞三個(gè)道具）。 這主要用于React的內(nèi)部，因?yàn)樗乖谕唤M件的多個(gè)版本之間進(jìn)行更新和跟蹤更改變得容易（我們?cè)谶@里擁有它，因?yàn)槊總€(gè)todo是ToDoItem組件的一個(gè)副本）。 確保您的組件具有唯一鍵也很重要，否則React會(huì)在控制臺(tái)中警告您。
Vue：
在Vue中，我們將道具傳遞到子組件的創(chuàng)建位置。 如：
- <ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" />
完成此操作后，我們將它們傳遞到子組件的props數(shù)組中，如下所示：props：[" todo"]。 然后可以通過子組件的名字在子組件中引用這些名字，因此在我們的案例中是todo。 如果您不確定該prop鍵的放置位置，則這是整個(gè)導(dǎo)出默認(rèn)對(duì)象在子組件中的外觀：
- export default {
- name: "ToDoItem", props: ["item"], setup(props, { emit }) {
- function deleteItem(id) {
- emit("delete", id);
- }
- return { deleteItem, };
- },
- };
您可能已經(jīng)注意到的一件事是，當(dāng)在Vue中遍歷數(shù)據(jù)時(shí)，我們實(shí)際上只是遍歷了list而不是list.value。 嘗試遍歷list.value在這里行不通
我們?nèi)绾螌?shù)據(jù)發(fā)送回父組件？
React：
首先，通過在調(diào)用子組件的地方將其作為道具引用，將函數(shù)傳遞給子組件。 然后，通過引用props.whateverTheFunctionIsCalled（如果使用了解構(gòu)）或whatTheFunctionIsCalled，可以通過諸如onClick之類的任何方式在子元素上添加對(duì)函數(shù)的調(diào)用。 然后，這將觸發(fā)位于父組件中的函數(shù)。 我們可以在"我們?nèi)绾螐牧斜碇袆h除"部分中看到整個(gè)過程的示例。
Vue：
在子組件中，我們只編寫了一個(gè)將值返回給父函數(shù)的函數(shù)。 在父組件中，我們編寫了一個(gè)函數(shù)，該函數(shù)偵聽何時(shí)發(fā)出該值，然后可以觸發(fā)函數(shù)調(diào)用。 我們可以在"我們?nèi)绾螐牧斜碇袆h除"部分中看到整個(gè)過程的示例。
我們終于得到它了！
我們已經(jīng)研究了如何添加，刪除和更改數(shù)據(jù)，以道具形式將數(shù)據(jù)從父級(jí)傳遞到子級(jí)，以及以事件偵聽器的形式將數(shù)據(jù)從子級(jí)發(fā)送到父級(jí)。 當(dāng)然，React和Vue之間還有許多其他的小差異和怪異之處，但是希望本文的內(nèi)容有助于為理解這兩個(gè)框架如何處理事物奠定基礎(chǔ)。
如果您有興趣分叉本文中使用的樣式，并想制作自己的同等作品，請(qǐng)隨時(shí)這樣做！
Github鏈接到兩個(gè)應(yīng)用程序：
Vue待辦事項(xiàng)：https://github.com/sunil-sandhu/vue-todo-2020
React待辦事項(xiàng)：https://github.com/sunil-sandhu/react-todo-2020
最初發(fā)布于：sunilsandhu.com
