當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

今天的考核题目: 你知道React和Vue的区别吗? skr，skr

發(fā)布時(shí)間：2023/12/2 vue 60 豆豆

生活随笔收集整理的這篇文章主要介紹了今天的考核题目: 你知道React和Vue的区别吗? skr，skr 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

React 和 Vue 的區(qū)別

博主面了幾家公司，看簡(jiǎn)歷上寫(xiě)著使用Vue.js框架，就會(huì)問(wèn)，你能說(shuō)一說(shuō) vue 和 react的區(qū)別嗎？react 聽(tīng)過(guò)，沒(méi)用過(guò)，所以就只能尷尬的說(shuō)不怎么了解react。這不，最近剛學(xué)了react (不斷爬坑中)，同時(shí)看了些博客文章，當(dāng)一回搬運(yùn)工，如有錯(cuò)誤，請(qǐng)指出～

簡(jiǎn)單的自我介紹一下

React是由Facebook創(chuàng)建的JavaScript UI框架，它的誕生改變了JavaScript世界，最大的一個(gè)改變就是React推廣了Virtual DOM，并且創(chuàng)造了新的語(yǔ)法 - JSX，JSX 允許在JavaScript中寫(xiě)html代碼。

Vue是由尤大大開(kāi)發(fā)的一個(gè)MVVM框架，它采用的是模板系統(tǒng)而不是JSX。

安利一波

Virtual DOM

一聽(tīng)可能有點(diǎn)懵逼？我也很懵逼。所以我們來(lái)看看別人怎么說(shuō)的：Vue.js(2.0版本)與React的其中最大一個(gè)相似之處，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual DOM基本上說(shuō)就是它名字的意思：虛擬DOM，DOM樹(shù)的虛擬表現(xiàn)。

Virtual DOM 是一個(gè)映射真實(shí)DOM的JavaScript對(duì)象，如果我們要改變?nèi)魏卧氐臓顟B(tài)，那么是先在Virtual DOM 上先進(jìn)行改變，而不是直接地去修改真實(shí)的DOM。比如在Vue中，我們將原來(lái)的節(jié)點(diǎn)改成這樣 :// 原DOM<div class='box'><p class='label'><span>{{ label }}</span></p></div>// 修改的DOM<div class='box'><p class='label'><span>{{ label }}</span><span>{{ username }}</span></p></div>我們往p節(jié)點(diǎn)中新增了一個(gè)span節(jié)點(diǎn)，于是我們一個(gè)新的Virtual DOM對(duì)象會(huì)被創(chuàng)建。然后新的Virtual DOM 和舊的Virtual DOM比較，通過(guò)diff算法，算出差異，然后這些差異就會(huì)被應(yīng)用在真實(shí)的DOM上

Vue 很“ 囂張 ”，它宣稱(chēng)可以更快地計(jì)算出Virtual DOM的差異，這是由于它在渲染過(guò)程中，由于vue會(huì)跟蹤每一個(gè)組件的依賴(lài)收集，通過(guò)setter / getter 以及一些函數(shù)的劫持，能夠精確地知道變化，并在編譯過(guò)程標(biāo)記了static靜態(tài)節(jié)點(diǎn)，在接下來(lái)新的Virtual DOM 并且和原來(lái)舊的 Virtual DOM進(jìn)行比較時(shí)候，跳過(guò)static靜態(tài)節(jié)點(diǎn)。所以不需要重新渲染整個(gè)組件樹(shù)。

React默認(rèn)是通過(guò)比較引用的方式進(jìn)行，當(dāng)某個(gè)組件的狀態(tài)發(fā)生變化時(shí)，它會(huì)以該組件為根，重新渲染整個(gè)組件子樹(shù)。如果想避免不必要的子組件重新渲染，你需要在所有可能的地方使用PureComponent，或者手動(dòng)實(shí)現(xiàn)shouldComponentUpdate方法。但是Vue中，你可以認(rèn)定它是默認(rèn)的優(yōu)化。

構(gòu)建工具

React 采用 Create-React-App， Vue 采用的是Vue-Cli，這兩個(gè)工具非常的好用啊，大兄弟，都能為你創(chuàng)建一個(gè)好環(huán)境，不過(guò)Create-Reacr-App會(huì)逼迫你使用webpack和Babel，而Vue-cli可以按需創(chuàng)建不同的模板，使用起來(lái)更加靈活一點(diǎn)

數(shù)據(jù)流

（這里借用一波言川老鐵的圖，下邊會(huì)貼出鏈接）

很直觀的，我們可以看到，在Vue2.x中，只能parent -> Child <-> DOM的形式，而React只能單向傳遞，React一直提倡的是單向數(shù)據(jù)流，數(shù)據(jù)主要從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)（通過(guò)props）。如果頂層（父級(jí)）的某個(gè)props改變了，React會(huì)重渲染所有的子節(jié)點(diǎn)。我們只能通過(guò)setState來(lái)改變狀態(tài)。

模板渲染方式不同

前面說(shuō)了，Vue和React的模板有所區(qū)別，React是通過(guò)JSX來(lái)渲染模板，而Vue是通過(guò)擴(kuò)展的HTML來(lái)進(jìn)行模板的渲染。React通過(guò)原生JS實(shí)現(xiàn)模板中的常見(jiàn)語(yǔ)法，比如說(shuō)條件啊、循環(huán)啊、三元運(yùn)算符啊等，都是通過(guò)JS語(yǔ)法實(shí)現(xiàn)。而Vue是在和組件代碼分離的單獨(dú)模板中，通過(guò)指令v-if、v-for等實(shí)現(xiàn)。

這里react比較好點(diǎn)，比如我們要引用一個(gè)組件，react直接import 引入，然后可以直接在render中調(diào)用了，但是！！vue需要import之后，還要在components里去聲明，才能用，好氣哦～

Vuex 和 Redux

在Vue中，我們是通過(guò)Vuex進(jìn)行狀態(tài)管理，而在React中，我們是通過(guò)Redux進(jìn)行狀態(tài)管理。但是這兩者在使用上還是有區(qū)別的。

在vuex中，我們可以通過(guò)在main.js中，引入 store文件夾，并把store掛載到new Vue實(shí)例中，這樣我們可以直接通過(guò)$store靈活使用。

你可以通過(guò)dispatch和commit進(jìn)行更新數(shù)據(jù)，通過(guò)this.$store.state.xx讀取數(shù)據(jù)
或者你可以通過(guò)mapState / mapActions 進(jìn)行vuex的操作

而在React中，我們需要每一個(gè)組件都引入connect，目的就是把props和dispatch連接起來(lái)。

另外！！！我們vuex可以直接dispatch action也可以commit update，但是redux只能通過(guò)dispatch，然后在reducer里，接收到action，通過(guò)判斷action的type，從而進(jìn)行對(duì)應(yīng)的操作，redux不能直接調(diào)用reducer進(jìn)行修改！！

Redux使用的是不可變的數(shù)據(jù)，而Vuex的數(shù)據(jù)是可變的，Redux每次修改更新數(shù)據(jù)，其實(shí)就是用新的數(shù)據(jù)替換舊的數(shù)據(jù)，而Vuex是直接修改原數(shù)據(jù)Redux 在檢測(cè)數(shù)據(jù)變化的時(shí)候，是通過(guò) diff 的方式比較差異的，而Vuex其實(shí)和Vue的原理一樣，是通過(guò) getter/setter來(lái)比較的，因?yàn)樵趘ue實(shí)例的時(shí)候，進(jìn)行了依賴(lài)收集。

不差上下？

反正我覺(jué)得他們兩個(gè)都好，skr，skr，如果你想做一個(gè)小型項(xiàng)目就用vue，想做大型項(xiàng)目就用react，我是不知道怎樣算小型，怎樣算大型，我隨心所欲，想用哪個(gè)就用哪個(gè)，我不會(huì)告訴你，我都是做的個(gè)人小項(xiàng)目～

總結(jié)

以上是生活随笔為你收集整理的今天的考核题目: 你知道React和Vue的区别吗? skr，skr的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：小程序如何发红包
下一篇： html5倒计时秒杀怎么做,vue 设