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

1.雙向綁定原理

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

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

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

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

vue2使用 Vue.set 來給對象新增一個屬性時，這個對象的所有 watcher 都會重新運行；

vue3只有依賴那個屬性的 watcher 才會重新運行

vue3默認進行懶觀察

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

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

2.Vue3支持碎片(Fragments)

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

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

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

3.Composition API

Vue2使用選項類型API（Options API）

Vue3使用合成型API（Composition API，

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

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

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

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

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

6.typescript支持

vue2默認是不支持typescript的。

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

vue與 react區(qū)別

共同點

1.虛擬dom+diff算法

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

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

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

不同點

1.框架

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

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

2.組件寫法差異

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

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

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

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

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

4.diff算法

對比節(jié)點

vue當節(jié)點元素相同，但是classname不同，認為是不同類型的元素，刪除重建，

react當節(jié)點元素相同，但是classname不同,認為是同類型節(jié)點，只是修改節(jié)點屬性。

列表對比

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

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

5.渲染過程

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

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

總結(jié)

如果想要一個輕量級，更快速，更現(xiàn)代的UI庫來制作單頁面應(yīng)用程序應(yīng)該選擇Vue.js，

如果是大規(guī)模應(yīng)用程序和移動應(yīng)用程序的應(yīng)該選擇React。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論