vue與react的區(qū)別是什么

vue與react的區(qū)別是什么？相信有很多人都不太了解，今天小編為了讓大家更加了解vue與react的區(qū)別，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。

創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元新興做網(wǎng)站,已為上家服務(wù),為新興各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

Vue 和 React存在著較大的區(qū)別，例在添加、刪除和更改數(shù)據(jù)，以 prop 形式從父組件到子組件傳遞數(shù)據(jù)，以及通過(guò)事件監(jiān)聽(tīng)器的形式將數(shù)據(jù)從子組件發(fā)送到父組件的實(shí)現(xiàn)方法中都存在較大差異

對(duì)于Vue 和 React框架想必大家都不陌生 ，這兩個(gè)都是目前非常有名的前端框架。但是對(duì)于它們二者之間的區(qū)別，很多人還不是太了解，今天將為大家詳細(xì)介紹這兩者之間的區(qū)別，希望可以幫助大家更好地理解它們兩者之間的差異。

1. 目標(biāo)

構(gòu)建一個(gè)標(biāo)準(zhǔn)的待辦事項(xiàng)應(yīng)用程序,用來(lái)允許用戶添加和刪除列表中的項(xiàng)目。這兩個(gè)應(yīng)用程序都使用默認(rèn)的 CLI（command-line interface，命令行界面） 構(gòu)建，React 使用 create-react-app，Vue 使用 vue-cli

兩個(gè)應(yīng)用程序的外觀如下：

兩個(gè)應(yīng)用程序的 CSS 代碼幾乎一樣，但這些代碼的位置存在差異，如下圖所示：

從圖中可以看出它們的結(jié)構(gòu)幾乎完全相同。唯一的區(qū)別在于 React App 擁有三個(gè) CSS 文件，而 Vue App 中沒(méi)有 CSS 文件。這是因?yàn)?/p>

React的 create-react-app 組件需要一個(gè)附帶文件來(lái)保存其樣式，而 Vue CLI 采用全包方法，其樣式在實(shí)際組件文件中聲明。

兩種不同的策略得到的結(jié)果是一樣的，相信開(kāi)發(fā)者很快能夠掌握這兩種不同的策略。開(kāi)發(fā)者可以根據(jù)自己的偏好做出選擇，你會(huì)聽(tīng)到開(kāi)發(fā)

社區(qū)關(guān)于如何構(gòu)建 CSS 的大量討論。以上，我們遵循兩個(gè) CLI 列出了代碼結(jié)構(gòu)。

在我們進(jìn)一步討論之前，先快速看一下典型的 Vue 和 React 組件的外觀：

現(xiàn)在開(kāi)始，讓我們深入探究其中的細(xì)節(jié)！

2. 如何修改數(shù)據(jù)

修改數(shù)據(jù)就是把已經(jīng)存儲(chǔ)好的數(shù)據(jù)進(jìn)行更改。在這一點(diǎn)上，React 和 Vue 的處理方式有所區(qū)別。Vue 本質(zhì)上會(huì)創(chuàng)建一個(gè)數(shù)據(jù)對(duì)象，其中的數(shù)據(jù)可以自由更改；React 則創(chuàng)建一個(gè)狀態(tài)對(duì)象，更改數(shù)據(jù)需要一些額外的操作。React 之所以需要額外的操作有著自己的理由，稍后我會(huì)深入介紹。在此之前，我們先看看 Vue 中的數(shù)據(jù)對(duì)象和 React 中的狀態(tài)對(duì)象：

Vue 數(shù)據(jù)對(duì)象

React 狀態(tài)對(duì)象

從圖中可以看出，我們傳入了相同的數(shù)據(jù)，但它們的標(biāo)記方法不同。因此，將初始數(shù)據(jù)傳遞到組件的方式非常相似。但正如我們提到的那樣，在兩個(gè)框架中更改數(shù)據(jù)的方式有所不同。

例：我們要修改一個(gè)名為 name: ‘Sunil’ 的數(shù)據(jù)元素

在 Vue 中，我們通過(guò)調(diào)用 this.name 來(lái)引用它。我們也可以通過(guò)調(diào)用 this.name ='John' 來(lái)更新它。這樣一來(lái)，名字就被成功改為了 “Jhon”。

在 React 中，我們通過(guò)調(diào)用 this.state.name 來(lái)引用同一段數(shù)據(jù)?，F(xiàn)在關(guān)鍵的區(qū)別在于，我們不能簡(jiǎn)單地寫(xiě)成 this.state.name='John'，因?yàn)?React 有限制機(jī)制，它會(huì)阻止這種簡(jiǎn)單的修改方式。在 React 中，我們需要這樣寫(xiě)：this.setState({name：'John'})。

雖然與 Vue 中實(shí)現(xiàn)的結(jié)果一樣，但是 React 的操作更為繁瑣。原因在于Vue 在每次更新數(shù)據(jù)時(shí)默認(rèn)組合了自己的 setState 版本。而React 需要 setState，然后再更新其內(nèi)部數(shù)據(jù)。

現(xiàn)在我們知道如何更改數(shù)據(jù)了，接下來(lái)看看如何在待辦應(yīng)用程序中添加新的事項(xiàng)。

3. 添加新的待辦事項(xiàng)

React 的實(shí)現(xiàn)方法

createNewToDoItem = () => {
    this.setState( ({ list, todo }) => ({
      list: [
          ...list,
        {
          todo
        }
      ],
      todo: ''
    })
  );
};

在 React 中，我們的輸入字段有一個(gè)名為 value 的屬性。這個(gè) value 通過(guò)使用幾個(gè)函數(shù)自動(dòng)更新，這些函數(shù)綁定在一起以創(chuàng)建雙向綁定。我們通過(guò)在輸入字段上附加一個(gè) onChange 事件監(jiān)聽(tīng)器來(lái)創(chuàng)建這種形式的雙向綁定。如下所示：

<input type="text" 
       value={this.state.todo} 
       onChange={this.handleInput}/>

只要輸入字段的值發(fā)生更改，handleInput 函數(shù)就會(huì)運(yùn)行。它通過(guò)將狀態(tài)對(duì)象設(shè)置為輸入字段中的任何內(nèi)容來(lái)更新?tīng)顟B(tài)對(duì)象內(nèi)的 todo。handleInput 函數(shù)如下：

handleInput = e => {
  this.setState({
    todo: e.target.value
  });
};

現(xiàn)在，只要用戶按下頁(yè)面上的 + 按鈕添加新項(xiàng)目，createNewToDoItem 函數(shù)就會(huì)運(yùn)行 this.setState 并向其傳遞一個(gè)函數(shù)。該函數(shù)有兩個(gè)參數(shù)，第一個(gè)是來(lái)自狀態(tài)對(duì)象的整個(gè)列表數(shù)組，第二個(gè)是由 handleInput 函數(shù)更新的todo。然后該函數(shù)返回一個(gè)新對(duì)象，該對(duì)象包含之前的整個(gè)列表，并在其末尾添加todo。整個(gè)列表是通過(guò)使用擴(kuò)展運(yùn)算符添加的。

最后，我們將 todo 設(shè)置為空字符串，它會(huì)自動(dòng)更新輸入字段中的 value。

Vue 的實(shí)現(xiàn)方法

createNewToDoItem() {
    this.list.push(
        {
            'todo': this.todo
        }
    );
    this.todo = '';
}

在 Vue 中，我們的輸入字段中有一個(gè)名為 v-model 的句柄。這實(shí)現(xiàn)了**雙向綁定。輸入字段代碼如下：

<input type="text" v-model="todo"/>

V-Model 將輸入字段的內(nèi)容綁定到名為 toDoItem 的數(shù)據(jù)對(duì)象的鍵（key）上。當(dāng)頁(yè)面加載時(shí)，我們將 toDoItem 設(shè)置為空字符串，比如：todo：' '。如果已經(jīng)存在數(shù)據(jù)，例如 todo：'添加文本處'，輸入字段將加載添加文本處的輸入內(nèi)容。無(wú)論如何，將其作為空字符串，我們?cè)谳斎胱侄沃墟I入的任何文本都會(huì)綁定到 todo。這實(shí)際上是雙向綁定（輸入字段可以更新數(shù)據(jù)對(duì)象，數(shù)據(jù)對(duì)象可以更新輸入字段）。

因此，回顧前面的 createNewToDoItem() 代碼塊，我們將 todo 的內(nèi)容存放到列表數(shù)組中 ，然后將 todo 改為空字符串。

4. 刪除待辦事項(xiàng)

React 的實(shí)現(xiàn)方法

deleteItem = indexToDelete => {
    this.setState(({ list }) => ({
      list: list.filter((toDo, index) => index !== indexToDelete)
    }));
};

盡管 deleteItem 函數(shù)位于 ToDo.js 文件中，但是從 ToDoItem.js 文件中引用它也很容易，將 deleteItem() 函數(shù)作為 上的 prop 傳遞：

<ToDoItem deleteItem={this.deleteItem.bind(this, key)}/>

這會(huì)將該函數(shù)傳遞給子組件，使其可以訪問(wèn)。我們綁定了 this 并傳遞 key 參數(shù)，當(dāng)用戶點(diǎn)擊刪除項(xiàng)時(shí)，函數(shù)通過(guò) key 區(qū)分用戶點(diǎn)擊的是哪一條 ToDoItem 。然后，在ToDoItem 組件內(nèi)部，我們執(zhí)行以下操作：

<div className=”ToDoItem-Delete” onClick={this.props.deleteItem}>-</div>

想要引用位于父組件內(nèi)部的函數(shù)，只需引用 this.props.deleteItem 即可。

Vue 的實(shí)現(xiàn)方法

onDeleteItem(todo){
  this.list = this.list.filter(item => item !== todo);
}

Vue 的實(shí)現(xiàn)方法稍有不同，我們需要做到以下三點(diǎn)：

Step 1：首先，在元素上調(diào)用函數(shù)：

<div class=”ToDoItem-Delete” @click=”deleteItem(todo)”>-</div>

Step 2：然后我們必須創(chuàng)建一個(gè) emit 函數(shù)，將其作為子組件的內(nèi)部方法（在本例中為T(mén)oDoItem.vue），如下所示：

deleteItem(todo) {
    this.$emit('delete', todo)
}

Step 3：之后，你會(huì)發(fā)現(xiàn)，當(dāng)我們添加 ToDo.vue的 ToDoItem.vue 時(shí)，實(shí)際上引用了一個(gè)函數(shù)：

<ToDoItem v-for="todo in list" 
          :todo="todo" 
          @delete="onDeleteItem" // <-- this :)
          :key="todo.id" />

這就是所謂的自定義事件監(jiān)聽(tīng)器。它會(huì)監(jiān)聽(tīng)任何使用 'delete' 字符串的觸發(fā)事件。一旦監(jiān)聽(tīng)到事件，它會(huì)觸發(fā)一個(gè)名為 onDeleteItem 的函數(shù)。此函數(shù)位于 ToDo.vue 內(nèi)部，而不是 ToDoItem.vue。如前所述，該函數(shù)只是過(guò)濾數(shù)據(jù)對(duì)象內(nèi)的 todo 數(shù)組 ，以刪除被點(diǎn)擊的待辦事項(xiàng)。

在 Vue 示例中還需要注意的是，我們可以在 @click 偵聽(tīng)器中編寫(xiě) $emit 部分，這樣更加簡(jiǎn)單，如下所示：

 <div class=”ToDoItem-Delete” @click=”$emit(‘delete’, todo)”>-</div>

如果你喜歡，這樣做可以把 3 步減少到 2 步。

React 中的子組件可以通過(guò) this.props 訪問(wèn)父函數(shù)，而在 Vue 中，你需要從子組件中發(fā)出事件，父組件來(lái)收集事件。

5. 如何傳遞事件監(jiān)聽(tīng)器

React 的實(shí)現(xiàn)方法

事件監(jiān)聽(tīng)器處理簡(jiǎn)單事件（比如點(diǎn)擊）非常直接。我們?yōu)榇k事項(xiàng)創(chuàng)建了點(diǎn)擊事件，用于創(chuàng)建新的待辦事項(xiàng)，代碼如下：

<div className=”ToDo-Add” onClick={this.createNewToDoItem}>+</div>

非常簡(jiǎn)單，就像使用 vanilla JS 處理內(nèi)聯(lián) onClick 一樣。正如前文所述，只要按下回車按鈕，設(shè)置事件監(jiān)聽(tīng)器就需要花費(fèi)更長(zhǎng)的時(shí)間。這需要輸入標(biāo)簽處理 onKeyPress 事件，代碼如下：

<input type=”text” onKeyPress={this.handleKeyPress}/>

該函數(shù)只要識(shí)別到'enter'鍵被按下，它就會(huì)觸發(fā) **createNewToDoItem** 函數(shù)，代碼如下所示：

handleKeyPress = (e) => {
if (e.key === ‘Enter’) {
this.createNewToDoItem();
}
};

Vue 的實(shí)現(xiàn)方法

Vue 的事件監(jiān)聽(tīng)器更加直接。我們只需要使用一個(gè)簡(jiǎn)單的 @ 符號(hào)，就可以構(gòu)建出我們想要的事件監(jiān)聽(tīng)器。例如，想要添加 click 事件監(jiān)聽(tīng)器，代碼：

<div class=”ToDo-Add” @click=”createNewToDoItem()”>+</div>

注意：@click 實(shí)際上是 v-on:click 的簡(jiǎn)寫(xiě)。Vue 事件監(jiān)聽(tīng)器很強(qiáng)大，你可以為其選擇屬性，例如 .once 可以防止事件監(jiān)聽(tīng)器被多次觸發(fā)。此外，它還包含很多快捷方式。按下回車按鈕時(shí)，React 就需要花費(fèi)更長(zhǎng)的時(shí)間來(lái)創(chuàng)建事件監(jiān)聽(tīng)器，從而創(chuàng)建新的 ToDo 項(xiàng)目。在 Vue，代碼如下：

<input type=”text” v-on:keyup.enter=”createNewToDoItem”/>

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

React 的實(shí)現(xiàn)方法

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

<ToDoItem key={key} item={todo} />

此處我們向 ToDoItem 組件傳遞了兩個(gè) prop。之后，我們可以在子組件中通過(guò) this.props 引用它們

因此，想要訪問(wèn) item.todo prop，我們只需調(diào)用this.props.item 。

Vue 的實(shí)現(xiàn)方法

在 Vue 中，我們將 props 傳遞到子組件創(chuàng)建處的方式如下：

<ToDoItem v-for="todo in list" 
            :todo="todo"
            :key="todo.id"
            @delete="onDeleteItem" />

我們將它們傳遞給子組件中的 props 數(shù)組，如：props：['id'，'todo']。然后可以在子組件中通過(guò)名字引用它們。

7. 如何將數(shù)據(jù)發(fā)送回父組件

React 的實(shí)現(xiàn)方法

我們首先將函數(shù)傳遞給子組件，方法是在我們調(diào)用子組件時(shí)將其引用為 prop。

然后我們通過(guò)引用 this.props.whateverTheFunctionIsCalled，為子組件添加調(diào)用函數(shù)，例如 onClick。然后，這將觸發(fā)父組件中的函

數(shù)。刪除待辦事項(xiàng)一節(jié)中詳細(xì)介紹了整個(gè)過(guò)程。

Vue 的實(shí)現(xiàn)方法

在子組件中我們只需編寫(xiě)一個(gè)函數(shù)，將一個(gè)值發(fā)送回父函數(shù)。在父組件中編寫(xiě)一個(gè)函數(shù)來(lái)監(jiān)聽(tīng)子組件何時(shí)發(fā)出該值的事件，監(jiān)聽(tīng)到事件之后觸發(fā)函數(shù)調(diào)用。同樣，刪除待辦事項(xiàng)一節(jié)中詳細(xì)介紹了整個(gè)過(guò)程。

8. 總結(jié)

通過(guò)介紹了如何添加、刪除和更改數(shù)據(jù)，以 prop 形式從父組件到子組件傳遞數(shù)據(jù)，以及通過(guò)事件監(jiān)聽(tīng)器的形式將數(shù)據(jù)從子組件發(fā)送到父組件等方法來(lái)理解React 和 Vue 之間的差異，希望通過(guò)本文的內(nèi)容有助于大家理解這兩個(gè)框架

關(guān)于vue與react的區(qū)別是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

文章名稱：vue與react的區(qū)別是什么
文章鏈接：http://bm7419.com/article4/ipoiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、虛擬主機(jī)、域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)