https://blog.csdn.net/weixin_44475093/article/details/112386778
https://blog.csdn.net/userDengDeng/article/details/114941956
一、vue3的新特性：
1坪稽、速度更快
vue3相比vue2
- 重寫了虛擬Dom實(shí)現(xiàn)
- 編譯模板的優(yōu)化
- 更高效的組件初始化
- undate性能提高1.3~2倍
- SSR速度提高了2~3倍
- 體積減小
2赌躺、體積更小
通過(guò)webpack的tree-shaking功能，可以將無(wú)用模塊“剪輯”峰档，僅打包需要的能夠tree-shaking败匹，有兩大好處：
- 對(duì)開發(fā)人員寨昙，能夠?qū)ue實(shí)現(xiàn)更多其他的功能，而不必?fù)?dān)憂整體體積過(guò)大掀亩。
- 對(duì)使用者舔哪，打包出來(lái)的包體積變小了
3、更易維護(hù)
compositon Api
composition Api槽棍，也就是組合式api捉蚤，通過(guò)這種形式，我們能夠更加容易維護(hù)我們的代碼炼七，將相同功能的變量進(jìn)行一個(gè)集中式的管理缆巧。
- 可與現(xiàn)有的Options API一起使用
- 靈活的邏輯組合與復(fù)用
-
Vue3模塊可以和其他框架搭配使用
image.png
4、 更好的Typescript支持
VUE3是基于typescipt編寫的豌拙，可以享受到自動(dòng)的類型定義提示
5陕悬、更接近原生
6、更易使用
第二篇文章
源碼組織方式的變化
使用 typescript 重寫
Composition Api
1按傅、vue.js 3.x 新增的一組 API
2捉超、一組基于函數(shù)的API
3胧卤、可以更靈活的組織組件的邏輯
性能提升
響應(yīng)式系統(tǒng)升級(jí)
- vue.js 2.x 中響應(yīng)式系統(tǒng)的核心 defineProperty
- Vue.js 3.x 中使用 proxy 對(duì)象重寫響應(yīng)式系統(tǒng)
1. 可以監(jiān)聽動(dòng)態(tài)新增的屬性
2. 可以監(jiān)聽刪除的屬性
3. 可以監(jiān)聽數(shù)組的索引和length屬性
編譯優(yōu)化
vue.js 2.x 中通過(guò)標(biāo)記靜態(tài)根結(jié)點(diǎn)，優(yōu)化 diff 的過(guò)程
vue.js 3.x 中標(biāo)記和提升所有的靜態(tài)根節(jié)點(diǎn)拼岳，diff 的時(shí)候只需要對(duì)比動(dòng)態(tài)節(jié)點(diǎn)的內(nèi)容枝誊。
1、 靜態(tài)提升
2惜纸、 Patch flag
3叶撒、事件監(jiān)聽緩存：cacheHandlers
優(yōu)化打包體積
Tree-shaking
二、vue2.x和vue3.x中的雙向數(shù)據(jù)綁定原理有什么不同堪簿？
1痊乾、vue2.x實(shí)現(xiàn)原理
主要還是通過(guò)Object.defineProperty實(shí)現(xiàn)雙向數(shù)據(jù)綁定的。
observe方法的具體邏輯：
Vue.prototype.observe = function(obj) {
var value = '',
_this = this;
for (var key in obj) {
value = obj[key];
(function(key, value) {
if (typeof obj[key] === 'object') {
this.observe(obj[key]);
} else {
Object.defineProperty(_this.$data, key, {
get: function() {
console.log('get value');
return value;
},
set: function(newVal) {
value = newVal;
_this.render();
}
});
}
})(key, value);
}
}
2椭更、vue3.x實(shí)現(xiàn)原理
vue3.x主要使用的是proxy對(duì)象哪审，proxy對(duì)象的定義是：Proxy 對(duì)象用于定義基本操作的自定義行為（如屬性查找，賦值虑瀑，枚舉湿滓，函數(shù)調(diào)用等）。
使用語(yǔ)法如下：
let p = new Proxy(target, handler);
參數(shù)如下：
target: 用Proxy包裝的目標(biāo)對(duì)象（可以是任何類型的對(duì)象舌狗，包括原生數(shù)組叽奥，函數(shù)，甚至另一個(gè)代理）痛侍。
handler: 一個(gè)對(duì)象朝氓，其屬性是當(dāng)執(zhí)行一個(gè)操作時(shí)定義代理的行為的函數(shù)。
var ob = {
a: 1,
b: 2
}
var obj = new Proxy(ob, {
// target就是第一個(gè)參數(shù)ob, receive就是返回的obj(返回的proxy對(duì)象)
get: function(target, key, receive) {
// 返回該屬性值
return target[key];
},
set: function(target, key, newVal, receive) {
// 執(zhí)行賦值操作
target[key] = newVal;
}
})
3. Proxy的優(yōu)勢(shì)
相比于vue2.x主届，使用proxy的優(yōu)勢(shì)如下:
- defineProperty只能監(jiān)聽某個(gè)屬性赵哲，不能對(duì)全對(duì)象監(jiān)聽
- 可以省去for in、閉包等內(nèi)容來(lái)提升效率（直接綁定整個(gè)對(duì)象即可）
- 可以監(jiān)聽數(shù)組君丁，不用再去單獨(dú)的對(duì)數(shù)組做特異性操作枫夺。
4、Proxy帶來(lái)的問(wèn)題：
Proxy的問(wèn)題在于瀏覽器兼容有點(diǎn)問(wèn)題绘闷，IE下完全不兼容橡庞，如果要兼容的話應(yīng)該是需要添加polyfill等內(nèi)容。
三印蔗、Vue3 如何重寫 Vdom
https://blog.csdn.net/qq_26443535/article/details/114079572
1扒最、patch flag 優(yōu)化靜態(tài)樹
當(dāng)我們創(chuàng)建了一個(gè)動(dòng)態(tài)的 dom 元素，我們發(fā)現(xiàn)創(chuàng)建動(dòng)態(tài) dom 元素的 時(shí)候华嘹，Vdom 除了模擬出來(lái)了它的基本信息之外吧趣，還給它加了一個(gè)標(biāo) 記： 1 /* TEXT */，這個(gè)標(biāo)記就叫做 patch flag（補(bǔ)丁標(biāo)記）
patch flag 的強(qiáng)大之處在于，當(dāng)你的 diff 算法走到 _createBlock 函數(shù)的時(shí)候再菊，會(huì)忽略所有的靜態(tài)節(jié)點(diǎn)爪喘，只對(duì)有標(biāo)記的動(dòng)態(tài)節(jié)點(diǎn)進(jìn)行對(duì)比。
2纠拔、 patch flag 優(yōu)化靜態(tài)屬性
只關(guān)注它有變化的部分秉剑。
3、靜態(tài)提升
剛剛我們提到 Vue3 突破 Vdom 的性能瓶頸的方式是稠诲，而在更新時(shí)具體的做法就是 靜態(tài)樹的提升 和 靜態(tài)屬性的提升侦鹏。
我們已經(jīng)知道處理后的 Vdom 都在 _createBlock 函數(shù)之中，而觀察結(jié)果我們發(fā)現(xiàn)臀叙，所有的靜態(tài)元素都被放在了 _createBlock 函數(shù)之外了略水，也就是說(shuō)他們只會(huì)在頁(yè)面初始的時(shí)候被渲染一次，而在更新的時(shí)候劝萤，靜>態(tài)元素是不予搭理的渊涝。這個(gè)優(yōu)化就是 Vue3 的 靜態(tài)提升。
4床嫌、事件監(jiān)聽緩存：cacheHandlers
使用cacheHandlers之后跨释，會(huì)自動(dòng)會(huì)生成一個(gè)內(nèi)聯(lián)函數(shù)，在內(nèi)聯(lián)函數(shù)里面在引用當(dāng)前組件最新的onClick厌处，再把這個(gè)內(nèi)聯(lián)函數(shù)cache起來(lái)鳖谈。
第一次渲染的時(shí)候，創(chuàng)建這個(gè)內(nèi)聯(lián)函數(shù)阔涉，并將這個(gè)內(nèi)聯(lián)函數(shù)緩存起來(lái)缆娃，后續(xù)的更新就從緩存里面讀同一個(gè)函數(shù)，同一個(gè)函數(shù)就沒(méi)有更新的必要了瑰排，通過(guò)這種事件監(jiān)聽緩存的方式也能對(duì)性能提升起到作用贯要。
四、vue3的新增的composition Api及使用
https://juejin.cn/post/6875253488017342478
1）Vue3為什么要使用Composition API凶伙？
為了解決什么問(wèn)題郭毕？
當(dāng)前使用Vue2開發(fā)的項(xiàng)目它碎，普遍存在的問(wèn)題：
- 代碼的可讀性隨著組件變大而變差
- 每一種代碼復(fù)用的方式函荣，都存在缺點(diǎn)
- TypeScript支持有限
2）常用的api方法：
1、ref和reactive
將數(shù)據(jù)創(chuàng)建和監(jiān)聽響應(yīng)式就需要通過(guò)vue暴露出來(lái)的功能 ref或reactive扳肛。兩者有所區(qū)別傻挂，ref用于基礎(chǔ)賦值類型的數(shù)據(jù)，而reactive用于引用類型的數(shù)據(jù)挖息。
其中基礎(chǔ)賦值類型的值金拒，在setup方法中，需要用 .value的方式進(jìn)行獲取和修改。因?yàn)橘x值類型的值如果return出去返回值绪抛，就失去了數(shù)據(jù)的雙綁定资铡。但是在template中，可以進(jìn)行直接訪問(wèn)幢码。
我們來(lái)討論一下兩者選擇問(wèn)題：
- 如果是單值笤休，建議ref，哪怕是個(gè)單值的對(duì)象也可以
const counterRef = ref(1)
const usersRef = ref(['tom', 'jerry'])
- 一個(gè)業(yè)務(wù)關(guān)注點(diǎn)有多個(gè)值症副，建議reactive
const mouse = reactive({
x: 0,
y: 0
})
2店雅、watchEffect和watch有啥不同？
這倆方法很相似贞铣，都是觀察響應(yīng)式數(shù)據(jù)闹啦，變化執(zhí)行副作用函數(shù)，但有如下不同：
- watch需要明確指定監(jiān)視目標(biāo),
watch(() => state.counter, (val, prevVal) => {})
- watchEffect不需要
watchEffect(() => {
console.log(state.counter)
})
watch可以獲取變化前后的值
watch是懶執(zhí)行的辕坝，它等效于vue2中的this.$watch()窍奋，watchEffect為了收集依賴，要立即執(zhí)行一次酱畅。
3费变、setup
setup是vue新增的一個(gè)選項(xiàng)，它是組件內(nèi)使用Composition API的入口圣贸。setup是在創(chuàng)建vue組件實(shí)例并完成props的初始化之后執(zhí)行
4挚歧、生命周期
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
