Vue3相比Vue2具有以下改進(jìn)：可以沒有根標(biāo)簽，減少內(nèi)存使用场晶；采用組合式API混埠，使代碼更有序；生命周期鉤子函數(shù)有所變化诗轻；v-if和v-for的優(yōu)先級不同钳宪；diff算法優(yōu)化，減少不必要的節(jié)點比較扳炬；響應(yīng)式原理通過Proxy實現(xiàn)吏颖，性能提升。Vue3還具有更快的渲染性能恨樟、更小的體積半醉、更好的TypeScript支持和更靈活的組合式API。
一. 根節(jié)點不同
vue2中必須要有根標(biāo)簽劝术。
vue3中可以沒有根標(biāo)簽缩多，會默認(rèn)將多個根標(biāo)簽包裹在一個fragement虛擬標(biāo)簽中，有利于減少內(nèi)存夯尽。
二. 組合式API和選項式API
在vue2中采用選項式API瞧壮，將數(shù)據(jù)和函數(shù)集中起來處理登馒，將功能點切割了當(dāng)邏輯復(fù)雜的時候不利于代碼閱讀匙握。
在vue3中采用組合式API，將同一個功能的代碼集中起來處理陈轿，使得代碼更加有序圈纺，有利于代碼的書寫和維護。
三. 生命周期的變化
創(chuàng)建前：beforeCreate -> 使用setup()
創(chuàng)建后：created -> 使用setup()
掛載前：beforeMount -> onBeforeMount
掛載后：mounted -> onMounted
更新前：beforeUpdate -> onBeforeUpdate
更新后：updated -> onUpdated
銷毀前：beforeDestroy -> onBeforeUnmount
銷毀后：destroyed -> onUnmounted
異常捕獲：errorCaptured -> onErrorCaptured
被激活：onActivated 被包含在<keep-alive>中的組件麦射，會多出兩個生命周期鉤子函數(shù)蛾娶。被激活時執(zhí)行。
切換：onDeactivated 比如從 A 組件潜秋，切換到 B 組件蛔琅，A 組件消失時執(zhí)行
我們通常會用 onMounted 鉤子在組件掛載后發(fā)送異步請求，獲取數(shù)據(jù)并更新組件狀態(tài)峻呛。
這是因為onMounted鉤子在組件掛載到DOM后調(diào)用罗售，而發(fā)送異步請求通常需要確保組件已經(jīng)掛載，以便正確地操作DOM或者更新組件的狀態(tài)钩述。
四.v-if和v-for的優(yōu)先級
在vue2中v-for的優(yōu)先級高于v-if寨躁，可以放在一起使用，但是不建議這么做牙勘，會帶來性能上的浪費
在vue3中v-if的優(yōu)先級高于v-for职恳，一起使用會報錯。可以通過在外部添加一個標(biāo)簽放钦，將v-for移到外層
五.diff算法不同
vue2中的diff算法
遍歷每一個虛擬節(jié)點色徘，進(jìn)行虛擬節(jié)點對比，并返回一個patch對象操禀，用來存儲兩個節(jié)點不同的地方贺氓。用patch記錄的消息去更新dom
缺點：比較每一個節(jié)點，而對于一些不參與更新的元素床蜘，進(jìn)行比較是有點消耗性能的辙培。特點：特別要提一下Vue的patch是即時的，并不是打包所有修改最后一起操作DOM邢锯，也就是在vue中邊記錄變更新扬蕊。（React則是將更新放入隊列后集中處理）。
vue3中的diff算法
在初始化的時候會給每一個虛擬節(jié)點添加一個patchFlags丹擎，是一種優(yōu)化的標(biāo)識尾抑。只會比較patchFlags發(fā)生變化的節(jié)點，進(jìn)行識圖更新蒂培。而對于patchFlags沒有變化的元素作靜態(tài)標(biāo)記再愈，在渲染的時候直接復(fù)用。
六. 響應(yīng)式原理不同
vue2通過Object.definedProperty()的get()和set()來做數(shù)據(jù)劫持护戳、結(jié)合和發(fā)布訂閱者模式來實現(xiàn)翎冲，Object.definedProperty()會遍歷每一個屬性。
vue3通過proxy代理的方式實現(xiàn)媳荒。
proxy的優(yōu)勢：不需要像Object.definedProperty()的那樣遍歷每一個屬性抗悍，有一定的性能提升proxy可以理解為在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問都必須通過這一層攔截钳枕。這個攔截可以對外界的訪問進(jìn)行過濾和改寫缴渊。
當(dāng)屬性過多的時候利用Object.definedProperty()要通過遍歷的方式監(jiān)聽每一個屬性。利用proxy則不需要遍歷鱼炒，會自動監(jiān)聽所有屬性衔沼，有利于性能的提升
總結(jié)
更快的渲染性能：
Vue3 相比 Vue2 來說，Vue3 重寫了虛擬 Dom 實現(xiàn)昔瞧，編譯模板的優(yōu)化指蚁，更高效的組件初始化。
更小的體積：
Vue 3 的運行時核心相比 Vue 2 更小硬爆，這意味著更小的打包體積欣舵，減少了前端加載時間缨称。
Tree-shaking 支持：Vue 3 代碼更容易被 Tree-shaking 優(yōu)化宴树，因此可以更好地剔除不需要的代碼。
更好的 TypeScript 支持：
Vue 3 的代碼庫已經(jīng)全面采用 TypeScript 重寫野崇，提供了更好的類型推斷和類型提示。
提供了更多的內(nèi)置類型聲明糟把，使得開發(fā)時更容易發(fā)現(xiàn)代碼錯誤和調(diào)試绢涡。
更靈活的組合式 API：
Vue 3 引入了組合式 API，使得組件的邏輯可以更好地組織和復(fù)用遣疯。
組合式 API 提供了更直觀雄可、更靈活的方式來組織組件代碼，使得代碼更易讀缠犀、易維護数苫。
更好的響應(yīng)式系統(tǒng)：
Vue 3 使用了 Proxy 來重寫響應(yīng)式系統(tǒng)，相比 Vue 2 的 Object.defineProperty辨液，更加直觀和強大虐急。
在 Vue 3 中，可以在更深的層次上追蹤響應(yīng)式變量的變化滔迈，使得開發(fā)者能夠更準(zhǔn)確地監(jiān)聽數(shù)據(jù)變化止吁。
