(1)雙向數(shù)據(jù)綁定的原理不同
vue2中通過Object.definedProperty()的一個(gè)get與set來做數(shù)據(jù)挾持享完,結(jié)合訂閱發(fā)布者模式來實(shí)現(xiàn)的。Object.definedProperty()它呢會(huì)遍歷每一個(gè)屬性废膘,然后給它們加上get與set方法竹海,實(shí)現(xiàn)雙向數(shù)據(jù)綁定。而vue3中用的是ES6的proxy代理的方式來實(shí)現(xiàn)的雙向數(shù)據(jù)綁定的原理殖卑。
(2)是否支持碎片
vue2不支持碎片站削,vue3支持碎片,也就是說vue2中內(nèi)容是必須包裹在一個(gè)根標(biāo)簽下面孵稽,vue3中可以沒有這個(gè)根標(biāo)簽许起,因?yàn)樗鼤?huì)默認(rèn)將標(biāo)簽包裹在一個(gè)fragment的虛擬標(biāo)簽里面。
(3)API的類型不同
vue2中使用的是選項(xiàng)式API菩鲜,也就是數(shù)據(jù)是放在data里面多的园细,函數(shù)是放在methods里面的,計(jì)算屬性放在computed里面接校,監(jiān)聽放在watch里面猛频。vue3中使用的是組合式API,也就是將所有的代碼放在一起,更容易維護(hù)蛛勉。
(4)生命周期中鉤子函數(shù):
vue2中的生命周期:
beforeCreate 組件創(chuàng)建之前
created 組件創(chuàng)建之后
beforeMount 組件掛載到頁面之前
mounted 組件掛載到頁面之后
beforeUpdate 組件更新之前
updated 組件更新之后
beforeDestroy 實(shí)例銷毀之前
destroyed 實(shí)例銷毀之后調(diào)用
activated keep-alive 緩存的組件激活時(shí)調(diào)用鹿寻。
deactivated 被 keep-alive 緩存的組件停用時(shí)調(diào)用。
errorCaptured 當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用
vue3的生命周期:
setup開始創(chuàng)建組件
onBeforeMount 組件掛載到頁面之前執(zhí)行
onMounted 組件掛載到頁面之后執(zhí)行
onBeforeUpdate 組件更新之前
onUpdated 組件更新之后
onBeforeUnmount 實(shí)例銷毀之前
onUnmounted 實(shí)例銷毀之后調(diào)用
onActivated
onDeactivated
onErrorCaptured
(5)diff算法不同
Vue.js3 在 diff 算法方面的改進(jìn)主要包括使用靜態(tài)標(biāo)記優(yōu)化diff過程诽凌、優(yōu)化了 unkeyed 列表的處理和改進(jìn)響應(yīng)式系統(tǒng)對(duì)數(shù)組數(shù)據(jù)的支持毡熏,這些都使得 Vue.js 3 相對(duì)于 Vue.js 2 更加高效。
(6)父子傳參不同
Vue2 父?jìng)髯勇滤校胮rops 痢法;子傳父用事件Emit Events。在Vue2 中杜顺,會(huì)調(diào)用this.$emit 然后傳入事件名和對(duì)象财搁。
Vue3 父?jìng)髯樱胮rops躬络;子傳父用Emitting Events 尖奔。在Vue3 中的setup()中的第一參數(shù)content 對(duì)象中就有 emit,那么我們只要在setup()接收第二個(gè)參數(shù)中使用分解對(duì)象法取出emit 就可以在setup 方法中隨意使用了洗鸵。
(7)vuex 和pinia的使用:vue2中使用vuex進(jìn)行狀態(tài)管理越锈,vue3中使用pinia進(jìn)行狀態(tài)管理。