2021年，vue3.0 面試題分析（干貨滿滿，內(nèi)容詳盡）
Vue3.0 對于我們前端人的重要性 —— 2021年面試必備
2020年09月18日，vue3.0正式發(fā)布。隨著它的發(fā)布，Vue.js再次被推上了前端的風(fēng)口浪尖。
同時(shí)，面試官的提問也將加入一些有關(guān)Vue3.0的新元素（相信近期去面試的小伙伴或多或少都會被問到Vue3.0的知識點(diǎn)）。
那么接下來分析一波（本文講的非常詳細(xì)，爭取大家都能看懂，對大家有所幫助）：
1. Vue3.0里有哪些是值得我們重點(diǎn)關(guān)注的點(diǎn)？
2. Vue3.0中，哪些是面試官喜歡問的高頻率問題？
1. Vue3.0 里為什么要用 Proxy API 替代 defineProperty API？—— 響應(yīng)式優(yōu)化（高頻，重點(diǎn)！！！）
這是在面試中問的最多的一個(gè)問題，無論是大廠還是中小型公司，都喜歡問，也是Vue更新的重點(diǎn)。
開門送福利，號主給大家準(zhǔn)備了3套VUE3.0相關(guān)的視頻課程
掃一掃直接可免費(fèi)領(lǐng)取
a. defineProperty API 的局限性最大原因是它只能針對單例屬性做監(jiān)聽。
Vue2.x中的響應(yīng)式實(shí)現(xiàn)正是基于defineProperty中的descriptor，對 data 中的屬性做了遍歷 + 遞歸，為每個(gè)屬性設(shè)置了 getter、setter。
這也就是為什么 Vue 只能對 data 中預(yù)定義過的屬性做出響應(yīng)的原因，在Vue中使用下標(biāo)的方式直接修改屬性的值或者添加一個(gè)預(yù)先不存在的對象屬性是無法做到setter監(jiān)聽的，這是defineProperty的局限性。
b. Proxy API的監(jiān)聽是針對一個(gè)對象的，那么對這個(gè)對象的所有操作會進(jìn)入監(jiān)聽操作， 這就完全可以代理所有屬性，將會帶來很大的性能提升和更優(yōu)的代碼。
Proxy 可以理解成，在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對外界的訪問進(jìn)行過濾和改寫。
c. 響應(yīng)式是惰性的
在 Vue.js 2.x 中，對于一個(gè)深層屬性嵌套的對象，要劫持它內(nèi)部深層次的變化，就需要遞歸遍歷這個(gè)對象，執(zhí)行 Object.defineProperty 把每一層對象數(shù)據(jù)都變成響應(yīng)式的，這無疑會有很大的性能消耗。
在 Vue.js 3.0 中，使用 Proxy API 并不能監(jiān)聽到對象內(nèi)部深層次的屬性變化，因此它的處理方式是在 getter 中去遞歸響應(yīng)式，這樣的好處是真正訪問到的內(nèi)部屬性才會變成響應(yīng)式，簡單的可以說是按需實(shí)現(xiàn)響應(yīng)式，減少性能消耗。
基礎(chǔ)用法：
2. Vue3.0 編譯做了哪些優(yōu)化？（底層，源碼）
a. 生成 Block tree
Vue.js 2.x 的數(shù)據(jù)更新并觸發(fā)重新渲染的粒度是組件級的，單個(gè)組件內(nèi)部 需要遍歷該組件的整個(gè) vnode 樹。
在2.0里，渲染效率的快慢與組件大小成正相關(guān)：組件越大，渲染效率越慢。并且，對于一些靜態(tài)節(jié)點(diǎn)，又無數(shù)據(jù)更新，這些遍歷都是性能浪費(fèi)。Vue.js 3.0 做到了通過編譯階段對靜態(tài)模板的分析，編譯生成了 Block tree。
Block tree
是一個(gè)將模版基于動(dòng)態(tài)節(jié)點(diǎn)指令切割的嵌套區(qū)塊，每個(gè) 區(qū)塊內(nèi)部的節(jié)點(diǎn)結(jié)構(gòu)是固定的，每個(gè)區(qū)塊只需要追蹤自身包含的動(dòng)態(tài)節(jié)點(diǎn)。
所以，在3.0里，渲染效率不再與模板大小成正相關(guān)，而是與模板中動(dòng)態(tài)節(jié)點(diǎn)的數(shù)量成正相關(guān)。
b. slot 編譯優(yōu)化
Vue.js 2.x 中，如果有一個(gè)組件傳入了slot，那么每次父組件更新的時(shí)候，會強(qiáng)制使子組件update，造成性能的浪費(fèi)。
Vue.js 3.0 優(yōu)化了slot的生成，使得非動(dòng)態(tài)slot中屬性的更新只會觸發(fā)子組件的更新。
動(dòng)態(tài)slot指的是在slot上面使用v-if，v-for，動(dòng)態(tài)slot名字等會導(dǎo)致slot產(chǎn)生運(yùn)行時(shí)動(dòng)態(tài)變化但是又無法被子組件track的操作。
c. diff算法優(yōu)化（此知識點(diǎn)進(jìn)大廠可能會問到，由于篇幅較長，大家可以去官網(wǎng)看下）
3. Vue3.0新特性 —— Composition API 與 React.js 中 Hooks的異同點(diǎn)（難點(diǎn)問題）
a. React.js 中的 Hooks 基本使用
React Hooks 允許你 "勾入" 諸如組件狀態(tài)和副作用處理等 React 功能中。
Hooks 只能用在函數(shù)組件中，并允許我們在不需要?jiǎng)?chuàng)建類的情況下將狀態(tài)、副作用處理和更多東西帶入組件中。
React 核心團(tuán)隊(duì)奉上的采納策略是不反對類組件，所以你可以升級 React 版本、在新組件中開始嘗試 Hooks，并保持既有組件不做任何更改。
案例：
useState 和 useEffect 是 React Hooks 中的一些例子，使得函數(shù)組件中也能增加狀態(tài)和運(yùn)行副作用。
我們也可以自定義一個(gè)Hooks，它打開了代碼復(fù)用性和擴(kuò)展性的新大門。
b. Vue Composition API 基本使用
Vue Composition API 圍繞一個(gè)新的組件選項(xiàng) setup 而創(chuàng)建。
setup() 為 Vue 組件提供了狀態(tài)、計(jì)算值、watcher 和生命周期鉤子。
并沒有讓原來的 API（Options-based API）消失。
允許開發(fā)者 結(jié)合使用新舊兩種 API（向下兼容）。
c. 原理
React hook 底層是基于鏈表實(shí)現(xiàn)，調(diào)用的條件是每次組件被render的時(shí)候都會順序執(zhí)行所有的hooks。
vue hook 只會被注冊調(diào)用一次，vue 能避開這些麻煩的問題，原因在于它對數(shù)據(jù)的響應(yīng)是基于proxy的，對數(shù)據(jù)直接代理觀察。
（這種場景下，只要任何一個(gè)更改data的地方，相關(guān)的function或者template都會被重新計(jì)算，因此避開了react可能遇到的性能上的問題）。react 中，數(shù)據(jù)更改的時(shí)候，會導(dǎo)致重新render，重新render又會重新把hooks重新注冊一次，所以react復(fù)雜程度會高一些。
4. Vue3.0是如何變得更快的？（底層，源碼）
a. diff方法優(yōu)化
Vue2.x 中的虛擬dom是進(jìn)行全量的對比。
Vue3.0 中新增了靜態(tài)標(biāo)記（PatchFlag）：
在與上次虛擬結(jié)點(diǎn)進(jìn)行對比的時(shí)候，值對比帶有patch flag的節(jié)點(diǎn)，并且可以通過flag 的信息得知當(dāng)前節(jié)點(diǎn)要對比的具體內(nèi)容化。
b. hoistStatic 靜態(tài)提升
Vue2.x : 無論元素是否參與更新，每次都會重新創(chuàng)建。
Vue3.0 : 對不參與更新的元素，只會被創(chuàng)建一次，之后會在每次渲染時(shí)候被不停的復(fù)用。
c. cacheHandlers 事件偵聽器緩存
默認(rèn)情況下onClick會被視為動(dòng)態(tài)綁定，所以每次都會去追蹤它的變化但是因?yàn)槭峭粋€(gè)函數(shù)，所以沒有追蹤變化，直接緩存起來復(fù)用即可。
說在后面
其實(shí)很多小伙伴都存在這樣一種情況：Vue2.x都用了一年多了，官方文檔都還沒有去詳細(xì)過一遍，遇到問題就百度，所以Vue3.0一出就驚慌失措。
在這邊特地給大家準(zhǔn)備了前端開發(fā)學(xué)習(xí)大禮包課程
全套2021最新資料接近100G首次免費(fèi)分享
掃一掃直接免費(fèi)領(lǐng)取