Vue3.0 面試題匯總【附答案噢】

1. Vue 3.0 性能提升主要是通過哪幾方面體現(xiàn)的？

1.響應(yīng)式系統(tǒng)提升

vue2在初始化的時(shí)候，對(duì)data中的每個(gè)屬性使用definepropery調(diào)用getter和setter使之變?yōu)轫憫?yīng)式對(duì)象。如果屬性值為對(duì)象，還會(huì)遞歸調(diào)用defineproperty使之變?yōu)轫憫?yīng)式對(duì)象。

vue3使用proxy對(duì)象重寫響應(yīng)式。proxy的性能本來比defineproperty好，proxy可以攔截屬性的訪問、賦值、刪除等操作，不需要初始化的時(shí)候遍歷所有屬性，另外有多層屬性嵌套的話，只有訪問某個(gè)屬性的時(shí)候，才會(huì)遞歸處理下一級(jí)的屬性。

優(yōu)勢(shì)：

• 可以監(jiān)聽動(dòng)態(tài)新增的屬性；
• 可以監(jiān)聽刪除的屬性 ；
• 可以監(jiān)聽數(shù)組的索引和 length 屬性；

2. 編譯優(yōu)化

優(yōu)化編譯和重寫虛擬dom，讓首次渲染和更新dom性能有更大的提升 vue2 通過標(biāo)記靜態(tài)根節(jié)點(diǎn),優(yōu)化 diff 算法 vue3 標(biāo)記和提升所有靜態(tài)根節(jié)點(diǎn),diff 的時(shí)候只比較動(dòng)態(tài)節(jié)點(diǎn)內(nèi)容

Fragments, 模板里面不用創(chuàng)建唯一根節(jié)點(diǎn),可以直接放同級(jí)標(biāo)簽和文本內(nèi)容

靜態(tài)提升

patch flag, 跳過靜態(tài)節(jié)點(diǎn),直接對(duì)比動(dòng)態(tài)節(jié)點(diǎn),緩存事件處理函數(shù)

3. 源碼體積的優(yōu)化

vue3移除了一些不常用的api，例如：inline-template、filter等 使用tree-shaking

2. Composition Api 與 Vue 2.x使用的Options Api 有什么區(qū)別？

Options Api

包含一個(gè)描述組件選項(xiàng)（data、methods、props等）的對(duì)象 options；

API開發(fā)復(fù)雜組件，同一個(gè)功能邏輯的代碼被拆分到不同選項(xiàng) ；

使用mixin重用公用代碼，也有問題：命名沖突，數(shù)據(jù)來源不清晰；

composition Api

vue3 新增的一組 api，它是基于函數(shù)的 api，可以更靈活的組織組件的邏輯。

解決options api在大型項(xiàng)目中，options api不好拆分和重用的問題。

3. Proxy 相對(duì)于 Object.defineProperty

有哪些優(yōu)點(diǎn)？

proxy的性能本來比defineproperty好，proxy可以攔截屬性的訪問、賦值、刪除等操作，不需要初始化的時(shí)候遍歷所有屬性，另外有多層屬性嵌套的話，只有訪問某個(gè)屬性的時(shí)候，才會(huì)遞歸處理下一級(jí)的屬性。

• 可以* 監(jiān)聽數(shù)組變化
• 可以劫持整個(gè)對(duì)象
• 操作時(shí)不是對(duì)原對(duì)象操作,是 new Proxy 返回的一個(gè)新對(duì)象
• 可以劫持的操作有 13 種

4. Vue 3.0 在編譯方面有哪些優(yōu)化？

vue.js 3.x中標(biāo)記和提升所有的靜態(tài)節(jié)點(diǎn)，diff的時(shí)候只需要對(duì)比動(dòng)態(tài)節(jié)點(diǎn)內(nèi)容；

Fragments（升級(jí)vetur插件):

template中不需要唯一根節(jié)點(diǎn)，可以直接放文本或者同級(jí)標(biāo)簽

靜態(tài)提升(hoistStatic),當(dāng)使用 hoistStatic 時(shí),所有靜態(tài)的節(jié)點(diǎn)都被提升到 render 方法之外.只會(huì)在應(yīng)用啟動(dòng)的時(shí)候被創(chuàng)建一次,之后使用只需要應(yīng)用提取的靜態(tài)節(jié)點(diǎn)，隨著每次的渲染被不停的復(fù)用。

patch flag, 在動(dòng)態(tài)標(biāo)簽?zāi)┪布由舷鄳?yīng)的標(biāo)記,只能帶 patchFlag 的節(jié)點(diǎn)才被認(rèn)為是動(dòng)態(tài)的元素,會(huì)被追蹤屬性的修改,能快速的找到動(dòng)態(tài)節(jié)點(diǎn),而不用逐個(gè)逐層遍歷，提高了虛擬dom diff的性能。

緩存事件處理函數(shù)cacheHandler,避免每次觸發(fā)都要重新生成全新的function去更新之前的函數(shù) tree shaking 通過搖樹優(yōu)化核心庫體積,減少不必要的代碼量

5. ?Vue.js 3.0 響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理？

1. reactive

設(shè)置對(duì)象為響應(yīng)式對(duì)象。接收一個(gè)參數(shù)，判斷這參數(shù)是否是對(duì)象。不是對(duì)象則直接返回這個(gè)參數(shù)，不做響應(yīng)式處理。創(chuàng)建攔截器handerler，設(shè)置get/set/deleteproperty。

get

• 收集依賴（track）；
• 如果當(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）。

2. effect

接收一個(gè)函數(shù)作為參數(shù)。作用是：訪問響應(yīng)式對(duì)象屬性時(shí)去收集依賴

3. track

接收兩個(gè)參數(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 屬性，則添加這個(gè) activeEffect

4.trigger

判斷 WeakMap 中是否有 target 屬性，WeakMap 中有 target 屬性，則判斷 target 屬性的 map 值中是否有 key 屬性，有的話循環(huán)觸發(fā)收集的 effect()。

原文地址:blog.csdn.net/weixin_40599109/article/details/110938941

1.如果看到這里，說明你喜歡這篇文章，請(qǐng)?轉(zhuǎn)發(fā)、點(diǎn)贊、在看

2.關(guān)注公眾號(hào)前端人，回復(fù)資料包領(lǐng)取我整理的前端進(jìn)階資料包

3.回復(fù)加群，加入前端進(jìn)階群，和小伙伴一起學(xué)習(xí)討論!