本篇內容介紹了“React和Vue中創建應用的區別有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創新互聯-專業網站定制、快速模板網站建設、高性價比從化網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式從化網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋從化地區。費用合理售后完善，10余年實體公司更值得信賴。

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中創建應用的區別有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

當前題目：React和Vue中創建應用的區別有哪些
文章來源：http://vcdvsql.cn/article14/gdghde.html

成都網站建設公司_創新互聯，為您提供網站建設、網站維護、建站公司、商城網站、Google、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯