2021年，vue3.0 面試題分析（干貨滿滿，內(nèi)容詳盡）

Vue3.0 對(duì)于我們前端人的重要性 —— 2021年面試必備

2020年09月18日，vue3.0正式發(fā)布。隨著它的發(fā)布，Vue.js再次被推上了前端的風(fēng)口浪尖。
同時(shí)，面試官的提問也將加入一些有關(guān)Vue3.0的新元素（相信近期去面試的小伙伴或多或少都會(huì)被問到Vue3.0的知識(shí)點(diǎn)）。

那么接下來分析一波（本文講的非常詳細(xì)，爭(zhēng)取大家都能看懂，對(duì)大家有所幫助）：

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è)問題，無(wú)論是大廠還是中小型公司，都喜歡問，也是Vue更新的重點(diǎn)。

         開門送福利，號(hào)主給大家準(zhǔn)備了3套VUE3.0相關(guān)的視頻課程

掃一掃直接可免費(fèi)領(lǐng)取

a. defineProperty API 的局限性最大原因是它只能針對(duì)單例屬性做監(jiān)聽。

• Vue2.x中的響應(yīng)式實(shí)現(xiàn)正是基于defineProperty中的descriptor，對(duì) data 中的屬性做了遍歷 + 遞歸，為每個(gè)屬性設(shè)置了 getter、setter。

• 這也就是為什么 Vue 只能對(duì) data 中預(yù)定義過的屬性做出響應(yīng)的原因，在Vue中使用下標(biāo)的方式直接修改屬性的值或者添加一個(gè)預(yù)先不存在的對(duì)象屬性是無(wú)法做到setter監(jiān)聽的，這是defineProperty的局限性。

b. Proxy API的監(jiān)聽是針對(duì)一個(gè)對(duì)象的，那么對(duì)這個(gè)對(duì)象的所有操作會(huì)進(jìn)入監(jiān)聽操作， 這就完全可以代理所有屬性，將會(huì)帶來很大的性能提升和更優(yōu)的代碼。

• Proxy 可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問進(jìn)行過濾和改寫。

c. 響應(yīng)式是惰性的

• 在 Vue.js 2.x 中，對(duì)于一個(gè)深層屬性嵌套的對(duì)象，要劫持它內(nèi)部深層次的變化，就需要遞歸遍歷這個(gè)對(duì)象，執(zhí)行 Object.defineProperty 把每一層對(duì)象數(shù)據(jù)都變成響應(yīng)式的，這無(wú)疑會(huì)有很大的性能消耗。

• 在 Vue.js 3.0 中，使用 Proxy API 并不能監(jiān)聽到對(duì)象內(nèi)部深層次的屬性變化，因此它的處理方式是在 getter 中去遞歸響應(yīng)式，這樣的好處是真正訪問到的內(nèi)部屬性才會(huì)變成響應(yīng)式，簡(jiǎn)單的可以說是按需實(shí)現(xiàn)響應(yīng)式，減少性能消耗。

• 基礎(chǔ)用法：

2. Vue3.0 編譯做了哪些優(yōu)化？（底層，源碼）

a. 生成 Block tree

• Vue.js 2.x 的數(shù)據(jù)更新并觸發(fā)重新渲染的粒度是組件級(jí)的，單個(gè)組件內(nèi)部 需要遍歷該組件的整個(gè) vnode 樹。

  
  在2.0里，渲染效率的快慢與組件大小成正相關(guān)：組件越大，渲染效率越慢。并且，對(duì)于一些靜態(tài)節(jié)點(diǎn)，又無(wú)數(shù)據(jù)更新，這些遍歷都是性能浪費(fèi)。

• 
  

   

  Vue.js 3.0   做到了通過編譯階段對(duì)靜態(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í)候，會(huì)強(qiáng)制使子組件update，造成性能的浪費(fèi)。

• Vue.js 3.0 優(yōu)化了slot的生成，使得非動(dòng)態(tài)slot中屬性的更新只會(huì)觸發(fā)子組件的更新。

  
  動(dòng)態(tài)slot指的是在slot上面使用v-if，v-for，動(dòng)態(tài)slot名字等會(huì)導(dǎo)致slot產(chǎn)生運(yùn)行時(shí)動(dòng)態(tài)變化但是又無(wú)法被子組件track的操作。

c. diff算法優(yōu)化（此知識(shí)點(diǎn)進(jìn)大廠可能會(huì)問到，由于篇幅較長(zhǎng)，大家可以去官網(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ù)組件中，并允許我們?cè)诓恍枰獎(jiǎng)?chuàng)建類的情況下將狀態(tài)、副作用處理和更多東西帶入組件中。

• React 核心團(tuán)隊(duì)奉上的采納策略是不反對(duì)類組件，所以你可以升級(jí) 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í)候都會(huì)順序執(zhí)行所有的hooks。

• vue hook 只會(huì)被注冊(cè)調(diào)用一次，vue 能避開這些麻煩的問題，原因在于它對(duì)數(shù)據(jù)的響應(yīng)是基于proxy的，對(duì)數(shù)據(jù)直接代理觀察。

  
  （這種場(chǎng)景下，只要任何一個(gè)更改data的地方，相關(guān)的function或者template都會(huì)被重新計(jì)算，因此避開了react可能遇到的性能上的問題）。

• react 中，數(shù)據(jù)更改的時(shí)候，會(huì)導(dǎo)致重新render，重新render又會(huì)重新把hooks重新注冊(cè)一次，所以react復(fù)雜程度會(huì)高一些。

4. Vue3.0是如何變得更快的？（底層，源碼）

a. diff方法優(yōu)化

• Vue2.x 中的虛擬dom是進(jìn)行全量的對(duì)比。

• Vue3.0 中新增了靜態(tài)標(biāo)記（PatchFlag）：

  在與上次虛擬結(jié)點(diǎn)進(jìn)行對(duì)比的時(shí)候，值對(duì)比帶有patch flag的節(jié)點(diǎn)，并且可以通過flag 的信息得知當(dāng)前節(jié)點(diǎn)要對(duì)比的具體內(nèi)容化。

b. hoistStatic 靜態(tài)提升

• Vue2.x : 無(wú)論元素是否參與更新，每次都會(huì)重新創(chuàng)建。

• Vue3.0 : 對(duì)不參與更新的元素，只會(huì)被創(chuàng)建一次，之后會(huì)在每次渲染時(shí)候被不停的復(fù)用。

c. cacheHandlers 事件偵聽器緩存

• 默認(rèn)情況下onClick會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)去追蹤它的變化但是因?yàn)槭峭粋€(gè)函數(shù)，所以沒有追蹤變化，直接緩存起來復(fù)用即可。

說在后面

其實(shí)很多小伙伴都存在這樣一種情況：Vue2.x都用了一年多了，官方文檔都還沒有去詳細(xì)過一遍，遇到問題就百度，所以Vue3.0一出就驚慌失措。

在這邊特地給大家準(zhǔn)備了前端開發(fā)學(xué)習(xí)大禮包課程

掃一掃直接免費(fèi)領(lǐng)取