一、全景圖

二、背景

1、react：專業(yè)

• react 誕生于2011年（ FaxJS），
• 2013 年 7 月 3 日 v0.3.0
• 2016 年 3 月 30 日 v0.14.8
• 2016 年 4 月 9 日 v15.0.0
• 2017 年 9 月 27 日 v16.0.0，fiber正式誕生
• 2019 年 react 16.8發(fā)布 正式支持 hooks語法。
• 2020 年 10 月 22 日 v17
  

解決問題：

React用來解決什么問題，官方網(wǎng)站上這樣說道： We build React to solve one problem:building large applications with data that changes over time.

2、vue：傳奇

發(fā)端于2013年的個人項目，但如今已然成為世界三大前端框架之一，在中國大陸更是前端首選。（面試官問：為什么你學(xué)習(xí)用vue？答：因為愛國！）

• 2013年，在Google工作的尤雨溪，受到Angular的啟發(fā)，從中提取自己所喜歡的部分，開發(fā)出了一款輕量框架，最初命名為Seed。
• 同年12月，這粒種子發(fā)芽了，更名為Vue（因為是個視圖層庫，而 vue 是 view 的法語），版本號是0.6.0。
• 2014.01.24，Vue正式對外發(fā)布，版本號是0.8.0。
• 發(fā)布于2014.02.25的0.9.0，有了自己的代號：Animatrix，這個名字來自動畫版的《駭客帝國》，此后，重要的版本都會有自己的代號。
• 0.12.0發(fā)布于2015.06.13，代號Dragon Ball（龍珠），這一年，Vue迎來了大爆發(fā)，Laravel 社區(qū)（一款流行的 PHP 框架的社區(qū)）首次使用 Vue，Vue在JS社區(qū)也打響了知名度。
• 1.0.0 Evangelion（新世紀(jì)福音戰(zhàn)士）是Vue歷史上的第一個里程碑。同年，vue-router（2015-08-18）、vuex（2015-11-28）、vue-cli（2015-12-27）相繼發(fā)布，標(biāo)志著 Vue從一個視圖層庫發(fā)展為一個漸進(jìn)式框架。很多前端同學(xué)也是從這個版本開始成為Vue的用戶（vue1純純的響應(yīng)式）。
• 2016年10月1日 2.0.0 Ghost in the Shell（攻殼機(jī)動隊）是第二個重要的里程碑，它吸收了React的Virtual Dom方案，還支持服務(wù)端渲染。
• 2019年2月4日 在2.6發(fā)布之前的很長一段時間，Vue核心團(tuán)隊都在忙著vue-cli3.0的開發(fā)，積攢了不少需求，發(fā)布了vue2倒數(shù)第二個的版本（2020年發(fā)布）
• 2020年09月18日 帶著成為任何人都可以快速學(xué)習(xí)、易于接近的框架的使命vue3它來了，同年還推出了新時代打包工具vite（未來可能會取代webpack）

vue群眾基礎(chǔ)圖 如下圖：

三、技術(shù)思想

react整體上是函數(shù)式的思想，組件使用jsx語法，all in js，將html與css全都融入javaScript，jsx語法相對來說更加靈活。

vue的整體思想仍然是擁抱經(jīng)典的html(結(jié)構(gòu))+css(表現(xiàn))+js(行為)的形式，vue鼓勵開發(fā)者使用template模板，并提供指令供開發(fā)者使用如v-if、v-show、v-for等指令，因此在開發(fā)vue應(yīng)用的時候會有一種在寫經(jīng)典web應(yīng)用（結(jié)構(gòu)、表現(xiàn)、行為分離）的感覺。

一些老生常談的 數(shù)據(jù)管理(props、data vs state)、組件寫法、生命周期異同這里就不比較了。

1、key的異同為例

1、react與vue在列表加key的問題上最終目的是一致的：更準(zhǔn)確、更快地拿到oldVnode中對應(yīng)的vnode節(jié)點，提高性能。但是它們實現(xiàn)的算法卻有一定的差異。

1.1 react

React在渲染數(shù)組時如果子組件沒有提供key，會默認(rèn)將循環(huán)的index作為key來用作第一次渲染。 源碼本質(zhì)上就是暴力比較法：由于單鏈表fiber無法使用雙指針?biāo)惴ǎ詿o法對算法使用雙指針優(yōu)化?？傮w上經(jīng)歷兩輪遍歷，第一輪遍歷：處理更新的節(jié)點。第二輪遍歷：處理剩下的不屬于更新的節(jié)點。

為了降低算法復(fù)雜度，React的diff會預(yù)設(shè)限制：

只對同級元素進(jìn)行Diff。如果一個DOM節(jié)點在前后兩次更新中跨越了層級，那么React不會嘗試復(fù)用他。
兩個不同類型的元素會產(chǎn)生出不同的樹。如果元素由div變?yōu)閜，React會銷毀div及其子孫節(jié)點，并新建p及其子孫節(jié)點。
先判斷key再判斷type，兩者相同則為同一節(jié)點。更新>新增/刪除

1.2 vue

vue在diff性能方面要強(qiáng)于react，當(dāng)我認(rèn)真閱讀了源碼與書籍后，佩服至極， 力扣算法題--最長遞增子序列 舉個例子吧：以數(shù)組[2, 11, 6, 8, 1]為例：最終輸出的結(jié)果為[0, 2, 3]，表示最強(qiáng)增長序列的索引分別是0,2,3;對應(yīng)的值是2,6,8。換句話說，在這個數(shù)組中最長連續(xù)增長的值就是數(shù)組中的2,6,8三個元素。

那么vue3費了這么大的力氣，使用這個方法的目的是什么呢？ Vue2在DOM-Diff過程中，優(yōu)先處理特殊場景的情況，即頭頭比對，頭尾比對，尾頭比對等。

而Vue3在DOM-Diff過程中，根據(jù) newIndexToOldIndexMap 新老節(jié)點索引列表找到最長穩(wěn)定序列，通過最長增長子序列的算法比對，找出新舊節(jié)點中不需要移動的節(jié)點，原地復(fù)用，僅對需要移動或已經(jīng)patch(新增刪除節(jié)點等操作)節(jié)點進(jìn)行操作，最大限度地提升替換效率，相比于Vue2版本是質(zhì)的提升！

2、diff的宏觀比較

2.1 react

在react中如果某個組件的狀態(tài)發(fā)生改變，react會把此組件以及此組件的所有后代組件重新渲染，不過重新渲染并不代表會全部丟棄上一次的渲染結(jié)果，react還是會通過diff去比較兩次的虛擬dom最后patch到真實的dom上。雖然如此，如果組件樹過大，diff其實還是會有一部分的開銷。react內(nèi)部通過 fiber優(yōu)化 diff算法，外部建議開發(fā)者使用 shouldComponentUpdate pureComponent 來規(guī)避問題。

2.2 vue

vue2的響應(yīng)式是Object.defineProperty實現(xiàn)的，并且重寫getter``setter等一系列操作實現(xiàn)觀察者模式，一旦數(shù)據(jù)發(fā)生變化，不會像react一樣去比較整顆組件樹，而是去更新數(shù)據(jù)狀態(tài)變化了的組件實例。

3、生命周期

3.1 react 生命周期

old 15.x-16

new 16+

其他：componentDidCatch

React生命周期的命名一直都是非常語義化（小聲bb：真是又臭又長又難記）

3.2 vue生命周期

4、函數(shù)式編程

雙方都做出了大規(guī)模的改動，雖然源碼不同，但設(shè)計思想以及代碼簡易程度來看，確實都在進(jìn)步。

4.1 react hooks

原先繁瑣的 compomentDidUpdate生命周期 =》 useEffect，雖然不完全相同，但在大多數(shù)場景中，從開發(fā)者層面看待，我們更多是關(guān)心props或者state中的數(shù)據(jù)變化之后，會產(chǎn)生了什么后果（副作用），省去了開發(fā)者自己比較前后值的過程。（這應(yīng)該是react借鑒vue watch）

4.2 vue3 組合式api

vue3組合式api借鑒了react hooks中的部分思想，不得不說，青出于藍(lán)而勝于藍(lán)，再加上框架自己也做出了很多優(yōu)化工作，在性能上是react比不上的。

function() {
    useEffect(()=>{
        // 當(dāng)demo發(fā)生變化時觸發(fā)
        console.log(demo)
    },[demo])
    
    return (
        <div>react</div>
    )
}

import {reactive, watchEffect} from 'vue'
export default {
    setup() { 
          const state = reactive({ count: 0, name: 'zs' })
          watchEffect(() => {
            console.log(state.count)
            console.log(state.name)
          })
          return {
            state
          }
    }
}

由于初始化時源碼內(nèi)部的響應(yīng)式機(jī)制的緣故，新APIwatchEffect甚至都不需要監(jiān)聽是誰發(fā)生了變化就可以觸發(fā)副作用，因為監(jiān)聽的這個過程，全程都是vue3源碼中的 Proxy完成的。

不僅如此 vue3更是推出了更貼近原生js的語法，點贊?。。。。?！

<script setup>
import { reactive, ref} from "vue";

// 漸進(jìn)式更新：ref api
let val = ref("");
let todos = reactive([
  {
    id: 0,
    title: "吃飯",
    done: false,
  },
  {
    id: 1,
    title: "睡覺",
    done: false,
  },
]);

function addTodo() {
  todos.push({
    id: todos.length,
    title: val.value,
    done: false,
  });
  val.value = "";
}
</script>

其實到這里，vue技術(shù)棧的同學(xué)一定暗自得意，蹦出一句vue yes！ 可惜這么好的庫也有存在的問題，vue2響應(yīng)式Object.defineProperty無法監(jiān)聽數(shù)組下標(biāo)和對象后新增的屬性值變化已是老生常談，vue3采用了 Proxy Api解決這些問題的同時，也帶來了新的問題，如reactive只能傳對象（react useState簡單復(fù)雜值都可以），而官方推薦的ref卻需要通過 .value才能獲取值，這著實讓社區(qū)炸鍋，為此vue團(tuán)隊迫于壓力不得不推出 toRefs（感興趣的同學(xué)可以了解一下，之前線下我和藝寶探討過）。

5、事件處理(@Click vs onClick)

5.1 vue

vue中使用 v-on（簡寫為:） 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。通常使用v-on接收一個需要調(diào)用的方法名稱。

<div  @click="helloShanghai">welcome</div>
<div  @click="helloShanghai('hello')">welcome</div>

訪問原生DOM事件，可以將$event顯式傳入method中

<div  @click="helloShanghai('hello', $event)">welcome</div>

普通元素 addEventListener，組件$on

5.2 react

React 元素的事件處理和 DOM 元素的很相似，但是有一點語法上的不同:

• React 事件的命名采用小駝峰式，而不是純小寫。
• 使用 JSX 語法時你需要傳入一個函數(shù)作為事件處理函數(shù)，而不是一個字符串。
  

<div onClick={this.handleClick}>Click me</div>
<div onClick={this.handleClick.bind(this)}>Click me</div>
<div onClick={()=>{this.handleClick()}）}>Click me</div>
<div onClick={this.handleClick()}>Click me</div><!-- 錯誤寫法>

react16將合成事件掛載到 document上，17版本后為root根元素。

6、組件化

Vue鼓勵寫近似常規(guī)HTML的模板。寫起來很接近標(biāo)準(zhǔn) HTML元素，只是多了一些屬性。 React推薦你所有的模板通用JavaScript的語法擴(kuò)展——JSX書寫。

7、構(gòu)建工具

React ==> Create React APP Vue ==> vue-cli

8、其他

當(dāng)然還有其他的一些比較，諸如vue的插槽（slot）與react的props.children。 生命周期：getDerivedStateFormProps、getSnapshotBeforeUpdate

我的看法：

1、react在中后臺項目中由于在處理復(fù)雜的業(yè)務(wù)邏輯或組件的復(fù)用問題比vue優(yōu)雅而被人認(rèn)可，但也更需要團(tuán)隊技術(shù)整體比較給力，領(lǐng)頭大佬的設(shè)計與把關(guān)能力要更優(yōu)秀，因此開發(fā)成本更大。 2、vue更友好更易上手的寫法著稱，更友好的api更親民的設(shè)計讓開發(fā)成本與效率大大提升。 3、另一方面，vue因為規(guī)定了很多api，規(guī)范了開發(fā)者，同時也一定程度上限制了開發(fā)者的發(fā)散思維；而react因為更少的a pi提高了開發(fā)者的創(chuàng)造力，同時也因為每個react開發(fā)者對react有不同的理解而產(chǎn)生不同的代碼風(fēng)格。 4、vue與react在發(fā)展長河中越發(fā)成熟，深思熟慮后覺得兩者不管在移動端或大型中后臺都是非?？尚械?，關(guān)于框架好壞的問題，其實更應(yīng)該思考的是公司團(tuán)隊想要用什么技術(shù)棧、自己喜歡與擅長什么技術(shù)棧等。

五、全家桶

到此這篇關(guān)于vue與react詳細(xì)的文章就介紹到這了,更多相關(guān)vue與react內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論