2023年，vue3.0面試題分析+華為400道面試全解析
Vue3.0 對于我們前端人的重要性 —— 2021年面試必備
2020年09月18日，vue3.0正式發(fā)布。隨著它的發(fā)布，Vue.js再次被推上了前端的風(fēng)口浪尖。
同時(shí)，面試官的提問也將加入一些有關(guān)Vue3.0的新元素（相信近期去面試的小伙伴或多或少都會被問到Vue3.0的知識點(diǎn)）。
涉及知識點(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)?。。。?/strong>
這是在面試中問的最多的一個問題，無論是大廠還是中小型公司，都喜歡問，也是Vue更新的重點(diǎn)。
a.?defineProperty API 的局限性最大原因是它只能針對單例屬性做監(jiān)聽。
Vue2.x中的響應(yīng)式實(shí)現(xiàn)正是基于defineProperty中的descriptor，對 data 中的屬性做了遍歷 + 遞歸，為每個屬性設(shè)置了 getter、setter。
這也就是為什么 Vue 只能對 data 中預(yù)定義過的屬性做出響應(yīng)的原因，在Vue中使用下標(biāo)的方式直接修改屬性的值或者添加一個預(yù)先不存在的對象屬性是無法做到setter監(jiān)聽的，這是defineProperty的局限性。
b.?Proxy API的監(jiān)聽是針對一個對象的，那么對這個對象的所有操作會進(jìn)入監(jiān)聽操作， 這就完全可以代理所有屬性，將會帶來很大的性能提升和更優(yōu)的代碼。
Proxy 可以理解成，在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對外界的訪問進(jìn)行過濾和改寫。
c. 響應(yīng)式是惰性的
在 Vue.js 2.x 中，對于一個深層屬性嵌套的對象，要劫持它內(nèi)部深層次的變化，就需要遞歸遍歷這個對象，執(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ǔ)用法：
為了更好的幫助大家備戰(zhàn)2022年春招面試跳槽季，號主再送大家一波福利~
400多道華為前端面試題詳解和答案，精心整理了很久的一本資料。本書是準(zhǔn)備找前端開發(fā)或跳槽的同學(xué)學(xué)習(xí)前端不可多得的一本入門好書。
資料也按目錄進(jìn)行編排，每一章下面都有更具體的內(nèi)容：
2.Vue3.0 編譯做了哪些優(yōu)化？（底層，源碼
a.?生成 Block tree
Vue.js 2.x 的數(shù)據(jù)更新并觸發(fā)重新渲染的粒度是組件級的，單個組件內(nèi)部 需要遍歷該組件的整個 vnode 樹。
在2.0里，渲染效率的快慢與組件大小成正相關(guān)：組件越大，渲染效率越慢。并且，對于一些靜態(tài)節(jié)點(diǎn)，又無數(shù)據(jù)更新，這些遍歷都是性能浪費(fèi)。
?
Vue.js 3.0 ? 做到了通過編譯階段對靜態(tài)模板的分析，編譯生成了 ? Block tree。
Block tree??
是一個將模版基于動態(tài)節(jié)點(diǎn)指令切割的嵌套區(qū)塊，每個 區(qū)塊內(nèi)部的節(jié)點(diǎn)結(jié)構(gòu)是固定的，每個區(qū)塊只需要追蹤自身包含的動態(tài)節(jié)點(diǎn)。
所以，在3.0里，渲染效率不再與模板大小成正相關(guān)，而是與模板中動態(tài)節(jié)點(diǎn)的數(shù)量成正相關(guān)。?
b. slot 編譯優(yōu)化
Vue.js 2.x 中，如果有一個組件傳入了slot，那么每次父組件更新的時(shí)候，會強(qiáng)制使子組件update，造成性能的浪費(fèi)。
Vue.js 3.0 優(yōu)化了slot的生成，使得非動態(tài)slot中屬性的更新只會觸發(fā)子組件的更新。
動態(tài)slot指的是在slot上面使用v-if，v-for，動態(tài)slot名字等會導(dǎo)致slot產(chǎn)生運(yùn)行時(shí)動態(tài)變化但是又無法被子組件track的操作。
c. diff算法優(yōu)化（此知識點(diǎn)進(jìn)大廠可能會問到，由于篇幅較長，大家可以去官網(wǎng)看下）
額外福利，2021年前端面試題視頻詳解
曾經(jīng)花一萬多學(xué)習(xí)VUE的課程整理的隨堂筆記，總共接近50頁的筆記文檔，今天看到是緣分，免費(fèi)分享我的粉絲。
3.? Vue3.0新特性 —— Composition API 與 React.js 中 Hooks的異同點(diǎn)（難點(diǎn)問題）
a. React.js 中的 Hooks 基本使用
React Hooks 允許你 "勾入" 諸如組件狀態(tài)和副作用處理等 React 功能中。
Hooks 只能用在函數(shù)組件中，并允許我們在不需要創(chuàng)建類的情況下將狀態(tài)、副作用處理和更多東西帶入組件中。
React 核心團(tuán)隊(duì)奉上的采納策略是不反對類組件，所以你可以升級 React 版本、在新組件中開始嘗試 Hooks，并保持既有組件不做任何更改。
案例：
useState 和 useEffect 是 React Hooks 中的一些例子，使得函數(shù)組件中也能增加狀態(tài)和運(yùn)行副作用。
我們也可以自定義一個Hooks，它打開了代碼復(fù)用性和擴(kuò)展性的新大門。
b.?Vue Composition API 基本使用
Vue Composition API 圍繞一個新的組件選項(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ù)直接代理觀察。
（這種場景下，只要任何一個更改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會被視為動態(tài)綁定，所以每次都會去追蹤它的變化但是因?yàn)槭峭粋€函數(shù)，所以沒有追蹤變化，直接緩存起來復(fù)用即可。
說在后面
其實(shí)很多小伙伴都存在這樣一種情況：Vue2.x都用了一年多了，官方文檔都還沒有去詳細(xì)過一遍，遇到問題就百度，所以Vue3.0一出就驚慌失措。
