5個面試必問的 Vue3 考點
[Vue中文社區(qū)](javascript:void(0);)
來自：CSDN狱窘，作者：大唐榮華
1、Vue 3.0 性能提升主要是通過哪幾方面體現(xiàn)的财搁？
1.響應(yīng)式系統(tǒng)提升
vue2在初始化的時候蘸炸，對data中的每個屬性使用definepropery調(diào)用getter和setter使之變?yōu)轫憫?yīng)式對象。如果屬性值為對象尖奔，還會遞歸調(diào)用defineproperty使之變?yōu)轫憫?yīng)式對象搭儒。
vue3使用proxy對象重寫響應(yīng)式。proxy的性能本來比defineproperty好提茁，proxy可以攔截屬性的訪問淹禾、賦值、刪除等操作茴扁，不需要初始化的時候遍歷所有屬性铃岔，另外有多層屬性嵌套的話，只有訪問某個屬性的時候，才會遞歸處理下一級的屬性毁习。
優(yōu)勢：
- 可以監(jiān)聽動態(tài)新增的屬性智嚷；
- 可以監(jiān)聽刪除的屬性 ；
- 可以監(jiān)聽數(shù)組的索引和 length 屬性纺且；
2. 編譯優(yōu)化
優(yōu)化編譯和重寫虛擬dom盏道，讓首次渲染和更新dom性能有更大的提升 vue2 通過標(biāo)記靜態(tài)根節(jié)點,優(yōu)化 diff 算法 vue3 標(biāo)記和提升所有靜態(tài)根節(jié)點,diff 的時候只比較動態(tài)節(jié)點內(nèi)容
Fragments, 模板里面不用創(chuàng)建唯一根節(jié)點,可以直接放同級標(biāo)簽和文本內(nèi)容
靜態(tài)提升
patch flag, 跳過靜態(tài)節(jié)點,直接對比動態(tài)節(jié)點,緩存事件處理函數(shù)
3. 源碼體積的優(yōu)化
vue3移除了一些不常用的api，例如：inline-template载碌、filter等 使用tree-shaking
2. Composition Api 與 Vue 2.x使用的Options Api 有什么區(qū)別猜嘱？
Options Api
包含一個描述組件選項（data、methods嫁艇、props等）的對象 options朗伶；
API開發(fā)復(fù)雜組件，同一個功能邏輯的代碼被拆分到不同選項 步咪；
使用mixin重用公用代碼论皆，也有問題：命名沖突，數(shù)據(jù)來源不清晰歧斟；
composition Api
vue3 新增的一組 api纯丸，它是基于函數(shù)的 api偏形，可以更靈活的組織組件的邏輯静袖。
解決options api在大型項目中，options api不好拆分和重用的問題俊扭。
3. Proxy 相對于 Object.defineProperty
有哪些優(yōu)點队橙？
proxy的性能本來比defineproperty好，proxy可以攔截屬性的訪問萨惑、賦值捐康、刪除等操作，不需要初始化的時候遍歷所有屬性庸蔼，另外有多層屬性嵌套的話解总，只有訪問某個屬性的時候，才會遞歸處理下一級的屬性姐仅。
- 可以* 監(jiān)聽數(shù)組變化
- 可以劫持整個對象
- 操作時不是對原對象操作,是 new Proxy 返回的一個新對象
- 可以劫持的操作有 13 種
4. Vue 3.0 在編譯方面有哪些優(yōu)化花枫？
vue.js 3.x中標(biāo)記和提升所有的靜態(tài)節(jié)點，diff的時候只需要對比動態(tài)節(jié)點內(nèi)容掏膏；
Fragments（升級vetur插件):
template中不需要唯一根節(jié)點劳翰，可以直接放文本或者同級標(biāo)簽
靜態(tài)提升(hoistStatic),當(dāng)使用 hoistStatic 時,所有靜態(tài)的節(jié)點都被提升到 render 方法之外.只會在應(yīng)用啟動的時候被創(chuàng)建一次,之后使用只需要應(yīng)用提取的靜態(tài)節(jié)點，隨著每次的渲染被不停的復(fù)用馒疹。
patch flag, 在動態(tài)標(biāo)簽?zāi)┪布由舷鄳?yīng)的標(biāo)記,只能帶 patchFlag 的節(jié)點才被認(rèn)為是動態(tài)的元素,會被追蹤屬性的修改,能快速的找到動態(tài)節(jié)點,而不用逐個逐層遍歷佳簸，提高了虛擬dom diff的性能。
緩存事件處理函數(shù)cacheHandler,避免每次觸發(fā)都要重新生成全新的function去更新之前的函數(shù) tree shaking 通過搖樹優(yōu)化核心庫體積,減少不必要的代碼量
5. Vue.js 3.0 響應(yīng)式系統(tǒng)的實現(xiàn)原理颖变？
1. reactive
設(shè)置對象為響應(yīng)式對象生均。接收一個參數(shù)听想，判斷這參數(shù)是否是對象。不是對象則直接返回這個參數(shù)疯特，不做響應(yīng)式處理哗魂。創(chuàng)建攔截器handerler，設(shè)置get/set/deleteproperty漓雅。
get
- 收集依賴（track）录别；
- 如果當(dāng)前 key 的值是對象，則為當(dāng)前 key 的對
- 象創(chuàng)建攔截器 handler, 設(shè)置 get/set/deleteProperty邻吞；
如果當(dāng)前的 key 的值不是對象组题，則返回當(dāng)前 key 的值。
set
設(shè)置的新值和老值不相等時抱冷，更新為新值崔列，并觸發(fā)更新（trigger）。
deleteProperty 當(dāng)前對象有這個 key 的時候旺遮，刪除這個 key 并觸發(fā)更新（trigger）赵讯。
2. effect
接收一個函數(shù)作為參數(shù)。作用是：訪問響應(yīng)式對象屬性時去收集依賴
3. track
接收兩個參數(shù)：target 和 key
－如果沒有 activeEffect耿眉，則說明沒有創(chuàng)建 effect 依賴
－如果有 activeEffect边翼，則去判斷 WeakMap 集合中是否有 target 屬性
－WeakMap 集合中沒有 target 屬性，則 set(target, (depsMap = new Map()))
－WeakMap 集合中有 target 屬性鸣剪，則判斷 target 屬性的 map 值的 depsMap 中是否有 key 屬性
－depsMap 中沒有 key 屬性组底，則 set(key, (dep = new Set())) －depsMap 中有 key 屬性，則添加這個 activeEffect
4.trigger
判斷 WeakMap 中是否有 target 屬性筐骇，WeakMap 中有 target 屬性债鸡，則判斷 target 屬性的 map 值中是否有 key 屬性，有的話循環(huán)觸發(fā)收集的 effect()铛纬。
END
<pre style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; color: rgb(63, 63, 63); font-size: 16px; letter-spacing: 0.544px; text-align: left; background-color: rgb(255, 255, 255);">推薦閱讀：
