vue2.0與vue3.0及vue與react的區(qū)別及說(shuō)明

更新時(shí)間：2023年10月25日 08:55:28 作者：跳跳的小古風(fēng)

這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue2.0 與 vue3.0 區(qū)別

1.雙向綁定原理

Vue2通過(guò)使用 Object.defineProperty 來(lái)劫持對(duì)象屬性的 geter 和 seter 操作，當(dāng)數(shù)據(jù)發(fā)生改變發(fā)出通知。

Vue3通過(guò)ES6的新特性proxy來(lái)劫持?jǐn)?shù)據(jù)，當(dāng)數(shù)據(jù)改變時(shí)發(fā)出通知。

Vue2無(wú)法檢測(cè)精確數(shù)組對(duì)象變化。

vue3可以檢測(cè)到對(duì)象/數(shù)組內(nèi)部數(shù)據(jù)的變化，更精準(zhǔn)的變更通知。

vue2使用 Vue.set 來(lái)給對(duì)象新增一個(gè)屬性時(shí)，這個(gè)對(duì)象的所有 watcher 都會(huì)重新運(yùn)行；

vue3只有依賴(lài)那個(gè)屬性的 watcher 才會(huì)重新運(yùn)行

vue3默認(rèn)進(jìn)行懶觀察

vue2.0數(shù)據(jù)一開(kāi)始就創(chuàng)建了觀察者，數(shù)據(jù)很大的時(shí)候，就會(huì)出現(xiàn)問(wèn)題。

vue3中進(jìn)行了優(yōu)化只有用于渲染初始化可見(jiàn)部分的數(shù)據(jù)，才會(huì)創(chuàng)建觀察者，效率更高。

2.Vue3支持碎片(Fragments)

vue2.0中是直接創(chuàng)建了一個(gè)vue實(shí)例

vue3.0中按需導(dǎo)出了一個(gè)createApp （ceateApp做了什么）

在vue2.0中必須要有一個(gè)根元素，vue3在組件可以擁有多個(gè)根節(jié)點(diǎn)。

3.Composition API

Vue2使用選項(xiàng)類(lèi)型API（Options API）

Vue3使用合成型API（Composition API，

舊的選項(xiàng)型API在代碼里分割了不同的屬性: data,computed屬性，methods等等。

新的合成型API用方法來(lái)分割，數(shù)據(jù)和?法都定義在setup中，并統(tǒng)?進(jìn)?return。

4.生命周期 5.v-if和v-for的優(yōu)先級(jí)

vue2v-for的優(yōu)先級(jí)高于v-if（因此我們通常需要計(jì)算屬性先對(duì)數(shù)據(jù)進(jìn)行加工處理，以達(dá)到性能優(yōu)化的目的）

vue3v-if的優(yōu)先級(jí)高于v-for

6.typescript支持

vue2默認(rèn)是不支持typescript的。

vue3支持使用typescript，使用typescript在構(gòu)建大型項(xiàng)目時(shí)，能夠很好的提高項(xiàng)目開(kāi)發(fā)的質(zhì)量。

vue與 react區(qū)別

共同點(diǎn)

1.虛擬dom+diff算法

2.提供了響應(yīng)式和組件化的視圖組件。

3.注意力集中保持在核心庫(kù)，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)。(vue-router、vuex、react-router、redux等等)

4.數(shù)據(jù)驅(qū)動(dòng)視圖（無(wú)需DOM的頻繁操作）

不同點(diǎn)

1.框架

Vue本質(zhì)是MVVM框架，由MVC發(fā)展而來(lái)；

React是前端組件化框架，由后端組件化發(fā)展而來(lái)。

2.組件寫(xiě)法差異

React推薦的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都寫(xiě)進(jìn) JavaScript 中,即 all in js;

Vue 推薦的做法是 template 的單文件組件格式(簡(jiǎn)單易懂，從傳統(tǒng)前端轉(zhuǎn)過(guò)來(lái)易于理解),即 html,css,JS 寫(xiě)在同一個(gè)文件(vue也支持JSX寫(xiě)法)

3.響應(yīng)式原理

采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter、getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)。

React改變state后不會(huì)主動(dòng)改變渲染好的dom，需要通過(guò)setState()方法才能渲染。且父組件傳值子組件，頂級(jí)pros改變后，會(huì)重新渲染所有子組件，需要用shouldComponentUpdate來(lái)優(yōu)化。

4.diff算法

對(duì)比節(jié)點(diǎn)

vue當(dāng)節(jié)點(diǎn)元素相同，但是classname不同，認(rèn)為是不同類(lèi)型的元素，刪除重建，

react當(dāng)節(jié)點(diǎn)元素相同，但是classname不同,認(rèn)為是同類(lèi)型節(jié)點(diǎn)，只是修改節(jié)點(diǎn)屬性。

列表對(duì)比

vue的列表對(duì)比，采用的是兩端到中間比對(duì)的方式，

react采用的是從左到右依次對(duì)比的方式。

5.渲染過(guò)程

Vue可以更快地計(jì)算出Virtual DOM的差異，這是由于它在渲染過(guò)程中，會(huì)跟蹤每一個(gè)組件的依賴(lài)關(guān)系，不需要重新渲染整個(gè)組件樹(shù)。

React在應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染。通過(guò)shouldComponentUpdate這個(gè)生命周期方法可以進(jìn)行控制，但Vue將此視為默認(rèn)的優(yōu)化。