vue3.0 面試題分析

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

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

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

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

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

1. Vue3.0 里為什么要用 Proxy API 替代 defineProperty API？—— 響應式優化（高頻，重點�。。。�

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

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

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

• Vue2.x中的響應式實現正是基于defineProperty中的descriptor，對 data 中的屬性做了遍歷 + 遞歸，為每個屬性設置了 getter、setter。
• 這也就是為什么 Vue 只能對 data 中預定義過的屬性做出響應的原因，在Vue中使用下標的方式直接修改屬性的值或者添加一個預先不存在的對象屬性是無法做到setter監聽的，這是defineProperty的局限性。

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

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

c. 響應式是惰性的

• 在 Vue.js 2.x 中，對于一個深層屬性嵌套的對象，要劫持它內部深層次的變化，就需要遞歸遍歷這個對象，執行 Object.defineProperty 把每一層對象數據都變成響應式的，這無疑會有很大的性能消耗。
• 在 Vue.js 3.0 中，使用 Proxy API 并不能監聽到對象內部深層次的屬性變化，因此它的處理方式是在 getter 中去遞歸響應式，這樣的好處是真正訪問到的內部屬性才會變成響應式，簡單的可以說是按需實現響應式，減少性能消耗。
• 基礎用法：

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

a. 生成 Block tree

• Vue.js 2.x 的數據更新并觸發重新渲染的粒度是組件級的，單個組件內部 需要遍歷該組件的整個 vnode 樹。 在2.0里，渲染效率的快慢與組件大小成正相關：組件越大，渲染效率越慢。并且，對于一些靜態節點，又無數據更新，這些遍歷都是性能浪費。
• Vue.js 3.0 做到了通過編譯階段對靜態模板的分析，編譯生成了 Block tree。 Block tree 是一個將模版基于動態節點指令切割的嵌套區塊，每個 區塊內部的節點結構是固定的，每個區塊只需要追蹤自身包含的動態節點。 所以，在3.0里，渲染效率不再與模板大小成正相關，而是與模板中動態節點的數量成正相關。

b. slot 編譯優化

• Vue.js 2.x 中，如果有一個組件傳入了slot，那么每次父組件更新的時候，會強制使子組件update，造成性能的浪費。
• Vue.js 3.0 優化了slot的生成，使得非動態slot中屬性的更新只會觸發子組件的更新。 動態slot指的是在slot上面使用v-if，v-for，動態slot名字等會導致slot產生運行時動態變化但是又無法被子組件track的操作。

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

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

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

• React Hooks 允許你 "勾入" 諸如組件狀態和副作用處理等 React 功能中。 Hooks 只能用在函數組件中，并允許我們在不需要創建類的情況下將狀態、副作用處理和更多東西帶入組件中。
• React 核心團隊奉上的采納策略是不反對類組件，所以你可以升級 React 版本、在新組件中開始嘗試 Hooks，并保持既有組件不做任何更改。
• 案例：

• useState 和 useEffect 是 React Hooks 中的一些例子，使得函數組件中也能增加狀態和運行副作用。
• 我們也可以自定義一個Hooks，它打開了代碼復用性和擴展性的新大門。

b. Vue Composition API 基本使用

• Vue Composition API 圍繞一個新的組件選項 setup 而創建。 setup() 為 Vue 組件提供了狀態、計算值、watcher 和生命周期鉤子。
• 并沒有讓原來的 API（Options-based API）消失。 允許開發者 結合使用新舊兩種 API（向下兼容）。

c. 原理

• React hook 底層是基于鏈表實現，調用的條件是每次組件被render的時候都會順序執行所有的hooks。
• vue hook 只會被注冊調用一次，vue 能避開這些麻煩的問題，原因在于它對數據的響應是基于proxy的，對數據直接代理觀察。 （這種場景下，只要任何一個更改data的地方，相關的function或者template都會被重新計算，因此避開了react可能遇到的性能上的問題）。
• react 中，數據更改的時候，會導致重新render，重新render又會重新把hooks重新注冊一次，所以react復雜程度會高一些。

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

a. diff方法優化

• Vue2.x 中的虛擬dom是進行全量的對比。
• Vue3.0 中新增了靜態標記（PatchFlag）： 在與上次虛擬結點進行對比的時候，值對比帶有patch flag的節點，并且可以通過flag 的信息得知當前節點要對比的具體內容化。

b. hoistStatic 靜態提升

• Vue2.x : 無論元素是否參與更新，每次都會重新創建。
• Vue3.0 : 對不參與更新的元素，只會被創建一次，之后會在每次渲染時候被不停的復用。

c. cacheHandlers 事件偵聽器緩存

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