1、Vue 3.0 性能提升主要是通過(guò)哪幾方面體現(xiàn)的？
一.編譯階段
diff 算法優(yōu)化
vue3 在 diff 算法中相比 vue2 增加了靜態(tài)標(biāo)記
關(guān)于這個(gè)靜態(tài)標(biāo)記，其作用是為了會(huì)發(fā)生變化的地方添加一個(gè) flag 標(biāo)記，下次發(fā)生變化的時(shí)候直接找該地方進(jìn)行比較靜態(tài)提升
Vue3 中對(duì)不參與更新的元素，會(huì)做靜態(tài)提升，只會(huì)被創(chuàng)建一次，在渲染時(shí)直接復(fù)用
這樣就免去了重復(fù)的創(chuàng)建節(jié)點(diǎn)，大型應(yīng)用會(huì)受益于這個(gè)改動(dòng)，免去了重復(fù)的創(chuàng)建操作，優(yōu)化了運(yùn)行時(shí)候的內(nèi)存占用事件監(jiān)聽(tīng)緩存
默認(rèn)情況下綁定事件行為會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)去追蹤它的變化SSR 優(yōu)化
當(dāng)靜態(tài)內(nèi)容大到一定量級(jí)時(shí)候，會(huì)用 createStaticVNode 方法在客戶端去生成一個(gè) static node，這些靜態(tài) node，會(huì)被直接 innerHtml，就不需要?jiǎng)?chuàng)建對(duì)象，然后根據(jù)對(duì)象渲染
二.源碼體積
相比 Vue2，Vue3 整體體積變小了，除了移出一些不常用的 API，再重要的是 Tree shanking
任何一個(gè)函數(shù)，如 ref、reavtived、computed 等，僅僅在用到的時(shí)候才打包，沒(méi)用到的模塊都被搖掉，打包的整體體積變小
三、響應(yīng)式系統(tǒng)
vue2 中采用 defineProperty 來(lái)劫持整個(gè)對(duì)象，然后進(jìn)行深度遍歷所有屬性，給每個(gè)屬性添加 getter 和 setter，實(shí)現(xiàn)響應(yīng)式
vue3 采用 proxy 重寫(xiě)了響應(yīng)式系統(tǒng)，因?yàn)?proxy 可以對(duì)整個(gè)對(duì)象進(jìn)行監(jiān)聽(tīng)，所以不需要深度遍歷
可以監(jiān)聽(tīng)動(dòng)態(tài)屬性的添加
可以監(jiān)聽(tīng)到數(shù)組的索引和數(shù)組 length 屬性
可以監(jiān)聽(tīng)刪除屬性
2、Vue 3.0 所采用的 Composition Api 與 Vue 2.x 使用的 Options Api 有什么區(qū)別？
- 在邏輯組織和邏輯復(fù)用方面，Composition API 是優(yōu)于 Options API
- Composition API 幾乎是函數(shù)，會(huì)有更好的類(lèi)型推斷。
- Composition API 對(duì) tree-shaking 友好，代碼也更容易壓縮
- Composition API 中見(jiàn)不到 this 的使用，減少了 this 指向不明的情況
- 如果是小型組件，可以繼續(xù)使用 Options API，也是十分友好的
3、Proxy 相對(duì)于 Object.defineProperty 有哪些優(yōu)點(diǎn)？
- Proxy 可以直接監(jiān)聽(tīng)對(duì)象而非屬性；
- Proxy 可以直接監(jiān)聽(tīng)數(shù)組的變化；
- Proxy 有多達(dá) 13 種攔截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的；
- Proxy 返回的是一個(gè)新對(duì)象,我們可以只操作新的對(duì)象達(dá)到目的,而 Object.defineProperty 只能遍歷對(duì)象屬性直接修改；
4、Vue 3.0 在編譯方面有哪些優(yōu)化？
diff 算法優(yōu)化
vue3 在 diff 算法中相比 vue2 增加了靜態(tài)標(biāo)記
關(guān)于這個(gè)靜態(tài)標(biāo)記，其作用是為了會(huì)發(fā)生變化的地方添加一個(gè) flag 標(biāo)記，下次發(fā)生變化的時(shí)候直接找該地方進(jìn)行比較靜態(tài)提升
Vue3 中對(duì)不參與更新的元素，會(huì)做靜態(tài)提升，只會(huì)被創(chuàng)建一次，在渲染時(shí)直接復(fù)用
這樣就免去了重復(fù)的創(chuàng)建節(jié)點(diǎn)，大型應(yīng)用會(huì)受益于這個(gè)改動(dòng)，免去了重復(fù)的創(chuàng)建操作，優(yōu)化了運(yùn)行時(shí)候的內(nèi)存占用事件監(jiān)聽(tīng)緩存
默認(rèn)情況下綁定事件行為會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)去追蹤它的變化SSR 優(yōu)化
當(dāng)靜態(tài)內(nèi)容大到一定量級(jí)時(shí)候，會(huì)用 createStaticVNode 方法在客戶端去生成一個(gè) static node，這些靜態(tài) node，會(huì)被直接 innerHtml，就不需要?jiǎng)?chuàng)建對(duì)象，然后根據(jù)對(duì)象渲染
5、Vue.js 3.0 響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理？
Vue3 使用 Proxy 對(duì)象重寫(xiě)響應(yīng)式系統(tǒng)，這個(gè)系統(tǒng)主要有以下幾個(gè)函數(shù)來(lái)組合完成的：
1、reactive:
接收一個(gè)參數(shù)，判斷這參數(shù)是否是對(duì)象。不是對(duì)象則直接返回這個(gè)參數(shù)，不做響應(yīng)式處理
創(chuàng)建攔截器對(duì)象 handler, 設(shè)置 get/set/deleteProperty
get
收集依賴（track）
返回當(dāng)前 key 的值。
如果當(dāng)前 key 的值是對(duì)象，則為當(dāng)前 key 的對(duì)象創(chuàng)建攔截器 handler, 設(shè)置 get/set/deleteProperty
如果當(dāng)前的 key 的值不是對(duì)象，則返回當(dāng)前 key 的值
set
設(shè)置的新值和老值不相等時(shí)，更新為新值，并觸發(fā)更新（trigger）
deleteProperty
當(dāng)前對(duì)象有這個(gè) key 的時(shí)候，刪除這個(gè) key 并觸發(fā)更新（trigger）
返回 Proxy 對(duì)象
2、effect: 接收一個(gè)函數(shù)作為參數(shù)。作用是：訪問(wèn)響應(yīng)式對(duì)象屬性時(shí)去收集依賴
3、track:
接收兩個(gè)參數(shù)：target 和 key
如果沒(méi)有 activeEffect，則說(shuō)明沒(méi)有創(chuàng)建 effect 依賴
如果有 activeEffect，則去判斷 WeakMap 集合中是否有 target 屬性，
WeakMap 集合中沒(méi)有 target 屬性，則 set(target, (depsMap = new Map()))
WeakMap 集合中有 target 屬性，則判斷 target 屬性的 map 值的 depsMap 中是否有 key 屬性
depsMap 中沒(méi)有 key 屬性，則 set(key, (dep = new Set()))
depsMap 中有 key 屬性，則添加這個(gè) activeEffect
4、trigger:
判斷 WeakMap 中是否有 target 屬性
WeakMap 中沒(méi)有 target 屬性，則沒(méi)有 target 相應(yīng)的依賴
WeakMap 中有 target 屬性，則判斷 target 屬性的 map 值中是否有 key 屬性，有的話循環(huán)觸發(fā)收集的 effect()
