內(nèi)部?jī)?yōu)化
1.vue2與vue3雙向數(shù)據(jù)綁定原理不同
2.靜態(tài)變量提升
3.pathFlag 標(biāo)記
4.緩存事件處理函數(shù)
寫法優(yōu)化
1.vue3碎片化忠藤，可寫多個(gè)根節(jié)點(diǎn)
2.api 不同 選項(xiàng)型 vue2: opsition api 組合型 vue3: composition api
3.數(shù)據(jù)存儲(chǔ)方式不同 vue2:data vue:ref reactive
1.vue2與vue3雙向數(shù)據(jù)綁定原理不同
vue2 是利用es5的object.defineProperty對(duì)數(shù)據(jù)進(jìn)行劫持結(jié)合發(fā)布訂閱模式實(shí)現(xiàn)的
vue3是利用es6的proxy API 對(duì)數(shù)據(jù)進(jìn)行的一個(gè)代理
細(xì)分
- diff 算法優(yōu)化，新增PatchFlag標(biāo)記 只比較帶有靜態(tài)標(biāo)記的節(jié)點(diǎn)
2.靜態(tài)提升 vue3中對(duì)于不參與更新的元素會(huì)做靜態(tài)提升症革，只會(huì)創(chuàng)建一次，在渲染的時(shí)候復(fù)用即可
3.事件監(jiān)聽(tīng)緩存 默認(rèn)情況下會(huì)給函數(shù)打一個(gè)靜態(tài)標(biāo)記 patchflag:8，表明這是個(gè)函數(shù)屿岂，會(huì)進(jìn)行緩存
2.vue3支持碎片
就是在組件中可以放置多個(gè)根節(jié)點(diǎn)
3.vue3中采用composition API
vue2:采用的選項(xiàng)型API(opsition API)
vue3:采用的合成型API(composition API
4.建立的數(shù)據(jù)方式不同
vue2:數(shù)據(jù)是放置在data屬性中
vue3:需要使用setup 方法坞琴，該方法在初始化構(gòu)造的時(shí)候觸發(fā)
注：ref:需要value 訪問(wèn)作郭，內(nèi)部還是使用的defineProperty set get 方法進(jìn)行監(jiān)聽(tīng)（proxy 不支持基本類型的監(jiān)聽(tīng)）
reactive: 使用的proxy對(duì)數(shù)據(jù)進(jìn)行的一個(gè)代理
5.聲明周期函數(shù)不同
vue2:
beforeCreate （初始化前）
created （初始化完成）
beforeMount（掛載前）
mounted （掛載完成）
beforeUpdate （更新前）
updated （更新完成）
beforeDestory （銷毀前）
distoryed（銷毀完成）
activeted(頁(yè)面緩存執(zhí)行)
deactiveted(頁(yè)面緩存)
vue3:
setup();
onBeforeCreate （初始化前）
onCreated （初始化完成）
onBeforeMount（掛載前）
onBMounted （掛載完成）
onBeforeUpdate （更新前）
onUpdated （更新完成）
onBeforeUnmount （銷毀前）
onUnmount（銷毀完成）
onActiveted(頁(yè)面緩存執(zhí)行)
onDeactiveted(頁(yè)面緩存)
