日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
我用React和Vue構建了同款應用，對比看看

前言

幾年前，我決定試著分別在 React 和 Vue 中構建一個相當標準的 To Do（待辦事項）應用。這兩個應用都是使用默認的 CLI 構建的（React 的 create-react-app 和 Vue 的 vue-cli）。我想盡量保持中立，通過這樣的例子來告訴大家這兩種技術執(zhí)行特定任務是是怎樣做的。

創(chuàng)新互聯(lián)公司專注于企業(yè)網絡營銷推廣、網站重做改版、合肥網站定制設計、自適應品牌網站建設、H5響應式網站、成都做商城網站、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為合肥等各大城市提供網站開發(fā)制作服務。

當 React Hooks 發(fā)布時，我為這篇文章更新了“2019 版”，用函數(shù)式 Hooks 取代了類組件。隨著 Vue 3 及其組合（Composition）API 的發(fā)布，現(xiàn)在是時候更新這篇文章的“2020 版”了。

2019 版：我用 React 和 Vue 構建了同款應用，來看看哪里不一樣

先來大致看一下兩款應用的外觀：

兩款應用的 CSS 代碼完全相同，但代碼所處的位置有所不同。記住這一點，接下來讓我們看一下它們的文件結構：

你會發(fā)現(xiàn)它們的結構也幾乎相同。唯一的區(qū)別是 React 應用有兩個 CSS 文件，而 Vue 應用沒有任何 CSS 文件。這是因為在 create-react-app 中，默認每個 React 組件都會附帶一個單獨文件來保存其樣式，而 Vue CLI 用單一的文件來為默認組件包含 HTML、CSS 和 JavaScript。

最后它們倆都達成了同樣的目標，也沒什么可多說的，因為在 React 或 Vue 中你都不能改變文件結構。選擇哪個確實取決于個人喜好。開發(fā)社區(qū)關于 CSS 的結構化方式這個話題有大量的討論，尤其是 React 這塊，因為有許多 CSS-in-JS 解決方案，諸如樣式化組件和 emotion 等。順便說一句，CSS-in-JS 就是字面上的意思。雖然這些都很有用，但這里我們只用兩邊的 CLI 給出的結構。

在進一步深入之前，我們先來看一下典型的 Vue 和 React 組件長什么樣：

典型的 React 文件：

典型的 Vue 文件：

看過之后我們來深入了解細節(jié)吧！

我們如何突變數(shù)據(jù)？

首先，“突變數(shù)據(jù)”到底是什么意思呢？聽起來是不是有點高深？其實它基本上就是指更改我們已存儲的數(shù)據(jù)。如果我們想將一個人名的值從 John 更改為 Mark，我們就是在“突變“這份數(shù)據(jù)。這就是 React 和 Vue 之間的關鍵區(qū)別所在。Vue 本質上創(chuàng)建了一個數(shù)據(jù)對象，可以在其中自由更新數(shù)據(jù)，而 React 通過所謂的狀態(tài) Hook 來處理數(shù)據(jù)突變。

從下面的圖片中可以看到兩者的設置，然后我們會具體說明：

React 狀態(tài)：

Vue 狀態(tài)：

于是你看到我們將相同的數(shù)據(jù)傳遞給了兩者，但各自的結構有所不同。

在 React 中，至少從 2019 年開始，我們一般會通過一系列 Hooks 處理狀態(tài)。你可能以前沒接觸過這種概念，一開始它看起來可能有點奇怪。它的工作機制基本上是這個樣子：

假設我們要創(chuàng)建一個待辦事項列表，我們可能需要創(chuàng)建一個名為 list 的變量，它可能需要接收一個由字符串或對象組成的數(shù)組（比如說給每個 todo 字符串一個 ID 或其他一些東西）。我們需要寫的代碼是const [list, setList] = useState([])。這里我們用的就是 React 里面的 Hook，稱為 useState。它本質上是讓我們能夠在組件中保留局部狀態(tài)。

另外，你可能已經注意到我們在 useState() 內部傳入了一個空數(shù)組 []。放在其中的是我們希望 list 最初設置的內容，這里我們希望是一個空數(shù)組。但從上圖可以看到，我們在數(shù)組內傳入了一些數(shù)據(jù)，這些數(shù)據(jù)最后成了 list 的初始化數(shù)據(jù)。想知道 setList 是做什么的？稍后會進一步說明！

在 Vue 中，通常會將組件的所有突變數(shù)據(jù)放置在一個 setup() 函數(shù)內，該函數(shù)返回一個對象，其中包含要公開的數(shù)據(jù)和函數(shù)（就是那些你要在應用中使用的東西）。你會注意到，應用中的每個狀態(tài)數(shù)據(jù)（也就是我們希望能夠突變的數(shù)據(jù)）都包裝在一個 ref() 函數(shù)內部。這個 ref() 函數(shù)是我們從 Vue 導入的，可讓我們的應用在這些數(shù)據(jù)更改 / 更新時完成更新。簡而言之，如果你想在 Vue 中創(chuàng)建突變數(shù)據(jù)，請為 ref() 函數(shù)分配一個變量，并在其中放入默認數(shù)據(jù)。

如何在應用中引用突變數(shù)據(jù)？

假設我們有一些數(shù)據(jù)名為 name，被分配了 Sunil 值。

在 React 中，由于我們使用 useState() 創(chuàng)建了較小的狀態(tài)，因此很可能已經用const [name, setName] = useState('Sunil')創(chuàng)建了一些東西。在應用中，我們將簡單地調用 name 來引用同一段數(shù)據(jù)。這里的主要區(qū)別在于我們不能簡單地寫上name = 'John'，因為 React 有一些限制來預防這種簡單且無所顧忌的突變。在 React 中，我們要寫成setName('John')。這里用到了 setName。在const [name, setName] = useState('Sunil')中，它創(chuàng)建兩個變量，一個變量變?yōu)閏onst name = 'Sunil'，而第二個 const setName 被分配了一個函數(shù)，該函數(shù)使 name 可以用新值重新創(chuàng)建。

在 Vue 中，它位于 setup() 函數(shù)內部，并且被稱為const name = ref('Sunil')。在應用中，我們將調用 name.value 來引用它。如果要使用在 ref() 函數(shù)內部創(chuàng)建的值，我們將在變量上尋找.value 而不是簡單地調用該變量。換句話說，如果我們想要一個持有狀態(tài)的變量值，我們將尋找 name.value 而不是 name。如果要更新 name 的值，可以通過更新 name.value 來完成。例如，假設我想將我的名字從 Sunil 更改為 John, 可以寫name.value = "John"來做到這一點。

實際上，React 和 Vue 在這里做的是同樣的事情，也就是創(chuàng)建可以更新的數(shù)據(jù)。Vue 本質上會在每次更新一條包裝在 ref() 函數(shù)內的數(shù)據(jù)是默認結合它自己的 name 和 setName 版本。React 要求你使用內部值調用 setName() 來更新狀態(tài)，而如果你曾嘗試更新數(shù)據(jù)對象內部的值，Vue 就會假設你要這么做。那么為什么 React 會費勁地將值與函數(shù)分開，還要使用 useState() 呢？這是因為當狀態(tài)改變時，React 希望重新運行某些生命周期 Hooks。在我們的例子中，當你調用 setName() 時，React 會知道有些狀態(tài)已更改，所以可以運行它們的生命周期 Hooks。如果你直接改變狀態(tài)，React 將不得不做更多的工作來跟蹤更改以及要運行的生命周期 Hooks 等。

現(xiàn)在我們已經搞明白了數(shù)據(jù)突變，接下來看看在兩個 To Do 應用中添加新項目的方法。

我們如何創(chuàng)建新的待辦事項？

React：

 
 
 
    
  
  
  
  1. const createNewToDoItem = () => {
    2. 
  
  
  
  2.     const newId = generateId();
    3. 
  
  
  
  3.     const newToDo = { id: newId, text: toDo };
    4. 
  
  
  
  4.     setList([...list, newToDo]);    setToDo("");
    5. 
  
  
  
  5. };
    6.

在 React 你是怎么做的？

在 React 中，我們的輸入字段有一個名為 value 的屬性。每次通過 onChange 事件偵聽器更改它的值時，都會自動更新此值。JSX（基本上是 HTML 的變體）如下所示：

 
 
 
    
  
  
  
  1. 
  
  
  
  2.     type="text"
    3. 
  
  
  
  3.     placeholder="I need to..."
    4. 
  
  
  
  4.     value={toDo}
    5. 
  
  
  
  5.     onChange={handleInput}
    6. 
  
  
  
  6.     onKeyPress={handleKeyPress}
    7. 
  
  
  
  7. />
    8.

每次更改值時，它都會更新狀態(tài)。handleInput 函數(shù)如下所示：

 
 
 
    
  
  
  
  1. const handleInput = (e) => {
    2. 
  
  
  
  2.     setToDo(e.target.value);};
    3.

現(xiàn)在，每當用戶按下頁面上的 + 按鈕添加新項目時，都會觸發(fā)createNewToDoItem 函數(shù)。我們再來看一下這個函數(shù)，搞清楚具體發(fā)生了什么：

 
 
 
    
  
  
  
  1. const createNewToDoItem = () => {
    2. 
  
  
  
  2.     const newId = generateId();
    3. 
  
  
  
  3.     const newToDo = { id: newId, text: toDo };
    4. 
  
  
  
  4.     setList([...list, newToDo]);    setToDo("");
    5. 
  
  
  
  5. };
    6.

本質上，newId 函數(shù)是在創(chuàng)建一個新 ID，該 ID 將提供給我們的新 toDo 項目。newToDo 變量是一個對象，有一個 id 鍵，其值由 newID 確定。它還有一個 text 鍵，其值由 toDo 確定。這個 toDo 就是輸入值更改時要更新的那個 toDo。

setList 函數(shù)到此為止，然后我們傳入一個包含整個 list 以及新創(chuàng)建的 newToDo 的數(shù)組。

你可能覺得…list 看起來很奇怪：開頭的三個點稱為 spread 運算符，負責將 list 中的所有值作為單獨的項目傳遞，而不是簡單地把所有項目打包在一起作為數(shù)組傳遞。感覺有些糊涂嗎？那我強烈建議你仔細閱讀 spread 運算符的相關介紹，因為它很有用！

最后我們運行 setToDo() 并傳入一個空字符串。這樣我們的輸入值為空，可以輸入新的 toDo 了。

Vue：

 
 
 
    
  
  
  
  1. function createNewToDoItem() {
    2. 
  
  
  
  2.     const newId = generateId();
    3. 
  
  
  
  3.     list.value.push({ id: newId, text: todo.value });
    4. 
  
  
  
  4.     todo.value = "";
    5. 
  
  
  
  5. }
    6.

在 Vue 你是怎么做的？

在 Vue 中，我們的 input 字段有一個稱為 v-model 的句柄。這使我們能夠執(zhí)行稱為 雙向綁定 的操作。下面來看一下 input 字段，搞清楚到底發(fā)生了什么：

 
 
 
    
  
  
  
  1. 
  
  
  
  2.     type="text"
    3. 
  
  
  
  3.     placeholder="I need to..."
    4. 
  
  
  
  4.     v-model="todo"
    5. 
  
  
  
  5.     v-on:keyup.enter="createNewToDoItem"
    6. 
  
  
  
  6. />
    7.

V-Model 將這個字段的輸入與我們在 setup() 函數(shù)上創(chuàng)建的一個變量相關聯(lián)，然后公開為一個返回對象內的鍵。到目前為止我們還沒有介紹對象返回的內容，所以先說一下，這是我們從 ToDo.vue 內部的 setup() 函數(shù)返回的內容：

 
 
 
    
  
  
  
  1. return {
    2. 
  
  
  
  2.     list,
    3. 
  
  
  
  3.     todo,    showError,    generateId,    createNewToDoItem,    onDeleteItem,    displayError};
    4.

這里，list、todo 和 showError 是我們的有狀態(tài)值，而其他所有內容都是我們希望能在應用其他位置調用的函數(shù)。在頁面加載時，我們必須將 todo 設置為一個空字符串，例如：const todo = ref("")。如果其中已經有一些數(shù)據(jù)，例如 const todo = ref("add some text here")：我們的輸入字段將在內部已有 add some text here 的情況下加載。不管怎樣，回到空字符串的狀態(tài)，無論我們在輸入字段中鍵入什么文本都必須綁定到 todo.value。這實際上就是雙向綁定——輸入字段可以更新 ref() 值，反過來后者也可以更新輸入字段。

回顧一下前面的 createNewToDoItem () 代碼塊，可以看到，我們將 todo.value 的內容推送到 list 數(shù)組中，然后將前者更新為一個空字符串。

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

如何從列表中刪除項目？

React：

 
 
 
    
  
  
  
  1. const deleteItem = (id) => {
    2. 
  
  
  
  2.     setList(list.filter((item) => item.id !== id));
    3. 
  
  
  
  3. };
    4.

在 React 你是怎么做的？

因為 deleteItem() 函數(shù)位于 ToDo.js 內，我可以很容易地在 ToDoItem.js 里引用它，首先將 deleteItem () 函數(shù)作為一個 prop，如下所示：

這里首先將該函數(shù)傳遞下去，使其能被子級訪問。然后在 ToDoItem 組件內執(zhí)行以下操作：

 
 
 
    
  
  
  
  1.  deleteItem(item.id)}>
    2. 
  
  
  
  2.     -
    3.

我要引用位于父組件內的函數(shù)，只需引用 props.deleteItem。你可能發(fā)現(xiàn)在代碼示例中，我們只寫了 deleteItem，而不是 props.deleteItem。這是因為我們使用了一種稱為 解構 的技術，該技術允許我們獲取 props 對象的一部分并將其分配給變量。因此在我們的 ToDoItem.js 文件中有以下內容：

 
 
 
    
  
  
  
  1. const ToDoItem = (props) => {
    2. 
  
  
  
  2.     const { item, deleteItem } = props;
    3. 
  
  
  
  3. }
    4.

這為我們創(chuàng)建了兩個變量，其中一個稱為 item，它被賦予與 props.item 相同的值，而 deleteItem 則根據(jù) props.deleteItem 賦值。我們也可以簡單地使用 props.item 和 props.deleteItem 來避免解構的操作，但我認為這里值得單獨介紹一下！

Vue：

 
 
 
    
  
  
  
  1. function onDeleteItem(id) {
    2. 
  
  
  
  2.     list.value = list.value.filter(item => item.id !== id);
    3. 
  
  
  
  3. }
    4.

在 Vue 你是怎么做的？

Vue 需要的方法稍微有一些不同。這里我們必須做三件事：

首先，在我們要調用函數(shù)元素上：

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     -
    3.

然后我們必須在子組件（在本例中為 ToDoItem.vue）中創(chuàng)建一個 emit 函數(shù)作為方法，如下所示：

 
 
 
    
  
  
  
  1. function deleteItem(id) {
    2. 
  
  
  
  2.     emit("delete", id);
    3. 
  
  
  
  3. }
    4.

與此同時你會發(fā)現(xiàn)，當我們在 ToDo.vue 中添加 ToDoItem.vue 時，我們實際上引用了一個 函數(shù)：

 
 
 
    
  
  
  
    2.

這就是所謂的自定義事件偵聽器 event-listener。它會偵聽使用字符串“delete”觸發(fā) emit 的所有情況。如果聽到此消息，它將觸發(fā)一個名為onDeleteItem 的函數(shù)。此函數(shù)位于 ToDo.vue 內部，而不是在 ToDoItem.vue中。如前所述，此函數(shù)僅過濾來自 list.value 數(shù)組內的 id。

在這里還需注意的是，在 Vue 示例中，我可以簡單地將 $emit 部分寫在 @click 偵聽器中，如下所示：

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     -
    3.

這樣就能把步驟從 3 步減少到 2 不，選哪個完全取決于個人喜好。簡而言之，React 中的子組件可以通過 props 來訪問父函數(shù)（前提是你要向下傳遞 props，這是相當標準的做法，其他 React 工作中也非常常見）；而在 Vue 中，你需要從子級發(fā)射事件，這些事件通常會在父組件內部回收。

怎樣傳遞事件偵聽器？

React：

針對簡單事件（例如單擊事件）的事件偵聽器很好做。下面是為創(chuàng)建新的 ToDo 項目的按鈕創(chuàng)建 click 事件的示例：

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     +
    3.

這里非常簡單，和在一般的 JS 里處理內聯(lián) onClick 差不多。如 Vue 部分所述，設置一個事件偵聽器來偵聽一下 Enter 鍵的動作有點復雜。這需要由 input 標簽處理 onKeyPress 事件，如下：

 
 
 
    
  
  
  
  1. 
  
  
  
  2.    type="text"
    3. 
  
  
  
  3.     placeholder="I need to..."
    4. 
  
  
  
  4.     value={toDo}
    5. 
  
  
  
  5.     onChange={handleInput}
    6. 
  
  
  
  6.    onKeyPress={handleKeyPress}
    7. 
  
  
  
  7. />
    8.

只要識別出已按下“enter”鍵，此函數(shù)就觸發(fā)了 createNewToDoItem 函數(shù)，如下：

 
 
 
    
  
  
  
  1. const handleKeyPress = (e) => {
    2. 
  
  
  
  2.     if (e.key === "Enter") {
    3. 
  
  
  
  3.     createNewToDoItem();    }};
    4.

Vue：

在 Vue 中寫起來非常直觀。我們只需使用 @符號，后面是我們想要做的事件監(jiān)聽器的類型。例如要添加一個 click 事件監(jiān)聽器，我們可以編寫以下代碼：

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     +
    3.

注意：@click 實際上是 v-on:click 的簡寫。Vue 事件偵聽器很好用的是你還可以綁定很多東西，例如.once，它可以防止事件偵聽器被多次觸發(fā)。在編寫處理按鍵的特定事件偵聽器時還有許多捷徑。我發(fā)現(xiàn)在 React 中創(chuàng)建一個事件偵聽器，做到每當按下 enter 鍵就創(chuàng)建新的 ToDo 項目，寫起來比較麻煩。在 Vue 中，我只需編寫：

 
 
 
    
  
  
  
    2.

如何將數(shù)據(jù)傳遞給子組件？ 

React：

在 React 中，我們將 props 傳遞到子組件的創(chuàng)建位置。如：

 
 
 
    
  
  
  
  1. ;
    2.

這里我們看到兩個傳遞給 ToDoItem 組件的 props。從這里開始，我們就可以通過 this.props 在子組件中引用它們。因此要訪問 item.todo prop 時，我們只需調用 props.item。你可能已經注意到還有一個 key prop（因此從技術上講，我們實際上正在傳遞三個 props）。這主要用于 React 的內部，因為它簡化了同一組件的多個版本之間更新和跟蹤更改的工作（我們這里每個 todo 是 ToDoItem 組件的一個副本）。確保你的組件具有唯一鍵也很重要，否則 React 會在控制臺中發(fā)出警告。

Vue：

在 Vue 中，我們將 props 傳遞到子組件的創(chuàng)建位置。如：

 
 
 
    
  
  
  
    2.

完成此操作后，我們將它們傳遞到子組件的 props 數(shù)組中，如下所示：props: [ "todo" ]。然后它們就可以在子組件中用名稱引用——這里的名稱就是 todo。如果你不知道在哪里放 prop 鍵，下面是我們的子組件中整個 export default 對象的樣子：

 
 
 
    
  
  
  
  1. export default {
    2. 
  
  
  
  2.     name: "ToDoItem",
    3. 
  
  
  
  3.     props: ["item"],
    4. 
  
  
  
  4.     setup(props, { emit }) {        function deleteItem(id) {
    5. 
  
  
  
  5.         emit("delete", id);
    6. 
  
  
  
  6.         }        return {
    7. 
  
  
  
  7.         deleteItem,        };    },};
    8.

你可能注意到 Vue 中遍歷數(shù)據(jù)時，我們實際上遍歷的是 list 而非 list.value。遍歷后者這里是行不通的。

如何將數(shù)據(jù)發(fā)射回父組件？

React：

我們首先將函數(shù)向下傳遞給子組件，在調用子組件的位置將其作為 prop 引用。然后我們向子組件的函數(shù)添加調用，比如說 onClick 就引用props.whateverTheFunctionIsCalled——或者whateverTheFunctionIsCalled（如果用解構）。然后將觸發(fā)位于父組件中的函數(shù)。我們可以在“如何從列表中刪除項目”部分中查看全過程。

Vue：

在子組件中，我們只需要編寫一個將值返回給父函數(shù)的函數(shù)即可。在父組件中我們編寫一個函數(shù)，該函數(shù)偵聽何時發(fā)射出該值，然后可以觸發(fā)一個函數(shù)調用?？梢栽凇叭绾螐牧斜碇袆h除項目”部分中查看全過程。

終于完成了！

我們已經研究了如何添加、刪除和更改數(shù)據(jù)，以 props 形式將數(shù)據(jù)從父級傳遞到子級，以及以事件偵聽器的形式將數(shù)據(jù)從子級發(fā)送到父級。當然，React 和 Vue 之間還有其他許多小差異和癖好，但我希望本文的內容有助于大家理解這兩個框架是如何處理事物的。

如果你有興趣 fork 本文中使用的樣式，并想制作自己的類似作品，請自便！

兩個應用的 Github 鏈接

Vue ToDo：

https://github.com/sunil-sandhu/vue-todo-2020

React ToDo：

https://github.com/sunil-sandhu/react-todo-2020


當前標題：我用React和Vue構建了同款應用，對比看看
地址分享：http://www.5511xx.com/article/dppscoc.html