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

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

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

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

1.雙向綁定原理

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

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

Vue2無法檢測精確數(shù)組對象變化。

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

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

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

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

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

vue3中進(jìn)行了優(yōu)化只有用于渲染初始化可見部分的數(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)類型API（Options API）

Vue3使用合成型API（Composition API，

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

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

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

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

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

6.typescript支持

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

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

vue與 react區(qū)別

共同點(diǎn)

1.虛擬dom+diff算法

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

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

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

不同點(diǎn)

1.框架

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

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

2.組件寫法差異

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

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

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

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

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

4.diff算法

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

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

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

列表對比

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

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

5.渲染過程

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

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