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

                   

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

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

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

1. Vue3.0里有哪些是值得我們重點關注的點？

2. Vue3.0中，哪些是面試官喜歡問的高頻率問題？

1. Vue3.0 里為什么要用 Proxy API 替代 defineProperty API？—— 響應式優(yōu)化（高頻，重點！！！）

這是在面試中問的最多的一個問題，無論是大廠還是中小型公司，都喜歡問，也是Vue更新的重點。

         開門送福利，號主給大家準備了3套VUE3.0相關的視頻課程

掃一掃直接可免費領取

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

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

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

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

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

c. 響應式是惰性的

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

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

• 基礎用法：

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

a. 生成 Block tree

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

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

• 
  

   

  Vue.js 3.0   做到了通過編譯階段對靜態(tài)模板的分析，編譯生成了   Block tree。

  Block tree  

  是一個將模版基于動態(tài)節(jié)點指令切割的嵌套區(qū)塊，每個 區(qū)塊內部的節(jié)點結構是固定的，每個區(qū)塊只需要追蹤自身包含的動態(tài)節(jié)點。
  所以，在3.0里，渲染效率不再與模板大小成正相關，而是與模板中動態(tài)節(jié)點的數(shù)量成正相關。  

  
  

b. slot 編譯優(yōu)化

• Vue.js 2.x 中，如果有一個組件傳入了slot，那么每次父組件更新的時候，會強制使子組件update，造成性能的浪費。

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

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

c. diff算法優(yōu)化（此知識點進大廠可能會問到，由于篇幅較長，大家可以去官網(wǎng)看下）

3.  Vue3.0新特性 —— Composition API 與 React.js 中 Hooks的異同點（難點問題）

a. React.js 中的 Hooks 基本使用

• React Hooks 允許你 "勾入" 諸如組件狀態(tài)和副作用處理等 React 功能中。

  Hooks 只能用在函數(shù)組件中，并允許我們在不需要創(chuàng)建類的情況下將狀態(tài)、副作用處理和更多東西帶入組件中。

• React 核心團隊奉上的采納策略是不反對類組件，所以你可以升級 React 版本、在新組件中開始嘗試 Hooks，并保持既有組件不做任何更改。

• 案例：

• useState 和 useEffect 是 React Hooks 中的一些例子，使得函數(shù)組件中也能增加狀態(tài)和運行副作用。

• 我們也可以自定義一個Hooks，它打開了代碼復用性和擴展性的新大門。

b. Vue Composition API 基本使用

• Vue Composition API 圍繞一個新的組件選項 setup 而創(chuàng)建。

  setup() 為 Vue 組件提供了狀態(tài)、計算值、watcher 和生命周期鉤子。

• 并沒有讓原來的 API（Options-based API）消失。

  允許開發(fā)者 結合使用新舊兩種 API（向下兼容）。

c. 原理

• React hook 底層是基于鏈表實現(xiàn)，調用的條件是每次組件被render的時候都會順序執(zhí)行所有的hooks。

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

  
  （這種場景下，只要任何一個更改data的地方，相關的function或者template都會被重新計算，因此避開了react可能遇到的性能上的問題）。

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

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

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

• Vue2.x 中的虛擬dom是進行全量的對比。

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

  在與上次虛擬結點進行對比的時候，值對比帶有patch flag的節(jié)點，并且可以通過flag 的信息得知當前節(jié)點要對比的具體內容化。

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

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

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

c. cacheHandlers 事件偵聽器緩存

• 默認情況下onClick會被視為動態(tài)綁定，所以每次都會去追蹤它的變化但是因為是同一個函數(shù)，所以沒有追蹤變化，直接緩存起來復用即可。

說在后面

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

在這邊特地給大家準備了前端開發(fā)學習大禮包課程

掃一掃直接免費領取