「面試題」20+Vue面試題整理

「觀感度：🌟🌟🌟🌟🌟」html

「口味：紅燒豬蹄」前端

「烹飪時間：15min」vue

本文已收錄在Github github.com/Geekhyt，歡迎Star。node

從鏡片的厚度和黃黑相見的格子襯衫我察覺到，面前坐着的這位面試官應該是來者不善。我像以往同樣，準備花3分鐘的時間進行自我介紹。在此期間，爲了不尷尬，我盯着面試官的眉毛中間，不過面試官明顯對個人經歷不是很感興趣。他在1分半的時候打斷了我。react

❝
你以爲本身最擅長的技術棧是什麼？git
❞

Vue吧，我很喜歡尤大，最近剛發佈了Vue的首部紀錄片，真的很好看。github

0.那你能講一講MVVM嗎？

MVVM是Model-View-ViewModel縮寫，也就是把MVC中的Controller演變成ViewModel。Model層表明數據模型，View表明UI組件，ViewModel是View和Model層的橋樑，數據會綁定到viewModel層並自動將數據渲染到頁面中，視圖變化的時候會通知viewModel層更新數據。面試

1.簡單說一下Vue2.x響應式數據原理

Vue在初始化數據時，會使用Object.defineProperty從新定義data中的全部屬性，當頁面使用對應屬性時，首先會進行依賴收集(收集當前組件的watcher)若是屬性發生變化會通知相關依賴進行更新操做(發佈訂閱)。正則表達式

2.那你知道Vue3.x響應式數據原理嗎？

(還好我有看，這個難不倒我)算法

Vue3.x改用Proxy替代Object.defineProperty。由於Proxy能夠直接監聽對象和數組的變化，而且有多達13種攔截方法。而且做爲新標準將受到瀏覽器廠商重點持續的性能優化。

❝
Proxy只會代理對象的第一層，那麼Vue3又是怎樣處理這個問題的呢？
❞

（很簡單啊）

判斷當前Reflect.get的返回值是否爲Object，若是是則再經過reactive方法作代理，這樣就實現了深度觀測。

❝
監測數組的時候可能觸發屢次get/set，那麼如何防止觸發屢次呢？
❞

咱們能夠判斷key是否爲當前被代理對象target自身屬性，也能夠判斷舊值與新值是否相等，只有知足以上兩個條件之一時，纔有可能執行trigger。

面試官擡起了頭。內心暗想

(這小子還行，比上兩個強，應該是多多少少看過Vue3的源碼了)

3.再說一下vue2.x中如何監測數組變化

使用了函數劫持的方式，重寫了數組的方法，Vue將data中的數組進行了原型鏈重寫，指向了本身定義的數組原型方法。這樣當調用數組api時，能夠通知依賴更新。若是數組中包含着引用類型，會對數組中的引用類型再次遞歸遍歷進行監控。這樣就實現了監測數組變化。

（能問到這的面試官都比較注重深度，這些常規操做要記牢）

（原型鏈的細節能夠參考個人另外一篇專欄）

一文帶你完全搞懂JavaScript原型鏈

4.nextTick知道嗎，實現原理是什麼？

在下次 DOM 更新循環結束以後執行延遲迴調。nextTick主要使用了宏任務和微任務。根據執行環境分別嘗試採用

Promise
MutationObserver
setImmediate
若是以上都不行則採用setTimeout

定義了一個異步方法，屢次調用nextTick會將方法存入隊列中，經過這個異步方法清空當前隊列。

（關於宏任務和微任務以及事件循環能夠參考個人另兩篇專欄）

(看到這你就會發現，其實問框架最終仍是考驗你的原生JavaScript功底)

瀏覽器中JavaScript的事件循環

Node.js事件循環

5.說一下Vue的生命週期

beforeCreate是new Vue()以後觸發的第一個鉤子，在當前階段data、methods、computed以及watch上的數據和方法都不能被訪問。

created在實例建立完成後發生，當前階段已經完成了數據觀測，也就是可使用數據，更改數據，在這裏更改數據不會觸發updated函數。能夠作一些初始數據的獲取，在當前階段沒法與Dom進行交互，若是非要想，能夠經過vm.$nextTick來訪問Dom。

beforeMount發生在掛載以前，在這以前template模板已導入渲染函數編譯。而當前階段虛擬Dom已經建立完成，即將開始渲染。在此時也能夠對數據進行更改，不會觸發updated。

mounted在掛載完成後發生，在當前階段，真實的Dom掛載完畢，數據完成雙向綁定，能夠訪問到Dom節點，使用$refs屬性對Dom進行操做。

beforeUpdate發生在更新以前，也就是響應式數據發生更新，虛擬dom從新渲染以前被觸發，你能夠在當前階段進行更改數據，不會形成重渲染。

updated發生在更新完成以後，當前階段組件Dom已完成更新。要注意的是避免在此期間更改數據，由於這可能會致使無限循環的更新。

beforeDestroy發生在實例銷燬以前，在當前階段實例徹底能夠被使用，咱們能夠在這時進行善後收尾工做，好比清除計時器。

destroyed發生在實例銷燬以後，這個時候只剩下了dom空殼。組件已被拆解，數據綁定被卸除，監聽被移出，子實例也通通被銷燬。

(關於Vue的生命週期詳解感興趣的也請移步個人另外一篇專欄)

從源碼解讀Vue生命週期，讓面試官對你另眼相看

6.你的接口請求通常放在哪一個生命週期中？

接口請求通常放在mounted中，但須要注意的是服務端渲染時不支持mounted，須要放到created中。

7.再說一下Computed和Watch

Computed本質是一個具有緩存的watcher，依賴的屬性發生變化就會更新視圖。適用於計算比較消耗性能的計算場景。當表達式過於複雜時，在模板中放入過多邏輯會讓模板難以維護，能夠將複雜的邏輯放入計算屬性中處理。

Watch沒有緩存性，更多的是觀察的做用，能夠監聽某些數據執行回調。當咱們須要深度監聽對象中的屬性時，能夠打開deep：true選項，這樣便會對對象中的每一項進行監聽。這樣會帶來性能問題，優化的話可使用字符串形式監聽，若是沒有寫到組件中，不要忘記使用unWatch手動註銷哦。

8.說一下v-if和v-show的區別

當條件不成立時，v-if不會渲染DOM元素，v-show操做的是樣式(display)，切換當前DOM的顯示和隱藏。

9.組件中的data爲何是一個函數？

一個組件被複用屢次的話，也就會建立多個實例。本質上，這些實例用的都是同一個構造函數。若是data是對象的話，對象屬於引用類型，會影響到全部的實例。因此爲了保證組件不一樣的實例之間data不衝突，data必須是一個函數。

10.說一下v-model的原理

v-model本質就是一個語法糖，能夠當作是value + input方法的語法糖。能夠經過model屬性的prop和event屬性來進行自定義。原生的v-model，會根據標籤的不一樣生成不一樣的事件和屬性。

11.Vue事件綁定原理說一下

原生事件綁定是經過addEventListener綁定給真實元素的，組件事件綁定是經過Vue自定義的$on實現的。

❝
面試官：(這小子基礎還能夠，接下來我得上上難度了)
❞

12.Vue模版編譯原理知道嗎，能簡單說一下嗎？

簡單說，Vue的編譯過程就是將template轉化爲render函數的過程。會經歷如下階段：

生成AST樹
優化
codegen

首先解析模版，生成AST語法樹(一種用JavaScript對象的形式來描述整個模板)。使用大量的正則表達式對模板進行解析，遇到標籤、文本的時候都會執行對應的鉤子進行相關處理。

Vue的數據是響應式的，但其實模板中並非全部的數據都是響應式的。有一些數據首次渲染後就不會再變化，對應的DOM也不會變化。那麼優化過程就是深度遍歷AST樹，按照相關條件對樹節點進行標記。這些被標記的節點(靜態節點)咱們就能夠跳過對它們的比對，對運行時的模板起到很大的優化做用。

編譯的最後一步是將優化後的AST樹轉換爲可執行的代碼。

❝
面試官：(精神小夥啊，有點東西，難度提高，不信難不倒你)
❞

13.Vue2.x和Vue3.x渲染器的diff算法分別說一下

簡單來講，diff算法有如下過程

同級比較，再比較子節點
先判斷一方有子節點一方沒有子節點的狀況(若是新的children沒有子節點，將舊的子節點移除)
比較都有子節點的狀況(核心diff)
遞歸比較子節點

正常Diff兩個樹的時間複雜度是O(n^3)，但實際狀況下咱們不多會進行跨層級的移動DOM，因此Vue將Diff進行了優化，從O(n^3) -> O(n)，只有當新舊children都爲多個子節點時才須要用核心的Diff算法進行同層級比較。

Vue2的核心Diff算法採用了雙端比較的算法，同時重新舊children的兩端開始進行比較，藉助key值找到可複用的節點，再進行相關操做。相比React的Diff算法，一樣狀況下能夠減小移動節點次數，減小沒必要要的性能損耗，更加的優雅。

Vue3.x借鑑了 ivi算法和 inferno算法

在建立VNode時就肯定其類型，以及在mount/patch的過程當中採用位運算來判斷一個VNode的類型，在這個基礎之上再配合核心的Diff算法，使得性能上較Vue2.x有了提高。(實際的實現能夠結合Vue3.x源碼看。)

該算法中還運用了動態規劃的思想求解最長遞歸子序列。

(看到這你還會發現，框架內無處不蘊藏着數據結構和算法的魅力)

❝
面試官：(能夠能夠，看來是個苗子，不過自我介紹屬實有些無聊，下一題)
❞

(基操，勿6)

14.再說一下虛擬Dom以及key屬性的做用

因爲在瀏覽器中操做DOM是很昂貴的。頻繁的操做DOM，會產生必定的性能問題。這就是虛擬Dom的產生緣由。

Vue2的Virtual DOM借鑑了開源庫snabbdom的實現。

Virtual DOM本質就是用一個原生的JS對象去描述一個DOM節點。是對真實DOM的一層抽象。(也就是源碼中的VNode類，它定義在src/core/vdom/vnode.js中。)

VirtualDOM映射到真實DOM要經歷VNode的create、diff、patch等階段。

「key的做用是儘量的複用 DOM 元素。」

新舊 children 中的節點只有順序是不一樣的時候，最佳的操做應該是經過移動元素的位置來達到更新的目的。

須要在新舊 children 的節點中保存映射關係，以便可以在舊 children 的節點中找到可複用的節點。key也就是children中節點的惟一標識。

15.keep-alive瞭解嗎

keep-alive能夠實現組件緩存，當組件切換時不會對當前組件進行卸載。

經常使用的兩個屬性include/exclude，容許組件有條件的進行緩存。

兩個生命週期activated/deactivated，用來得知當前組件是否處於活躍狀態。

keep-alive的中還運用了LRU(Least Recently Used)算法。

（又是數據結構與算法，原來算法在前端也有這麼多的應用）

16.Vue中組件生命週期調用順序說一下

組件的調用順序都是先父後子,渲染完成的順序是先子後父。

組件的銷燬操做是先父後子，銷燬完成的順序是先子後父。

加載渲染過程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

子組件更新過程

父beforeUpdate->子beforeUpdate->子updated->父updated

父組件更新過程

父 beforeUpdate -> 父 updated

銷燬過程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

17.Vue2.x組件通訊有哪些方式？

父子組件通訊

父->子props，子->父 $on、$emit

獲取父子組件實例 $parent、$children

Ref 獲取實例的方式調用組件的屬性或者方法

Provide、inject 官方不推薦使用，可是寫組件庫時很經常使用
兄弟組件通訊

Event Bus 實現跨組件通訊 Vue.prototype.$bus = new Vue

Vuex
跨級組件通訊

Vuex

$attrs、$listeners

Provide、inject

18.SSR瞭解嗎？

SSR也就是服務端渲染，也就是將Vue在客戶端把標籤渲染成HTML的工做放在服務端完成，而後再把html直接返回給客戶端。

SSR有着更好的SEO、而且首屏加載速度更快等優勢。不過它也有一些缺點，好比咱們的開發條件會受到限制，服務器端渲染只支持beforeCreate和created兩個鉤子，當咱們須要一些外部擴展庫時須要特殊處理，服務端渲染應用程序也須要處於Node.js的運行環境。還有就是服務器會有更大的負載需求。

19.你都作過哪些Vue的性能優化？

編碼階段

儘可能減小data中的數據，data中的數據都會增長getter和setter，會收集對應的watcher
v-if和v-for不能連用
若是須要使用v-for給每項元素綁定事件時使用事件代理
SPA 頁面採用keep-alive緩存組件
在更多的狀況下，使用v-if替代v-show
key保證惟一
使用路由懶加載、異步組件
防抖、節流
第三方模塊按需導入
長列表滾動到可視區域動態加載
圖片懶加載

SEO優化

預渲染
服務端渲染SSR

打包優化

壓縮代碼
Tree Shaking/Scope Hoisting
使用cdn加載第三方模塊
多線程打包happypack
splitChunks抽離公共文件
sourceMap優化

用戶體驗

骨架屏
PWA

還可使用緩存(客戶端緩存、服務端緩存)優化、服務端開啓gzip壓縮等。

(優化是個大工程，會涉及不少方面，這裏申請另開一個專欄)

20.hash路由和history路由實現原理說一下

location.hash的值實際就是URL中#後面的東西。

history實際採用了HTML5中提供的API來實現，主要有history.pushState()和history.replaceState()。

面試官拿起旁邊已經涼透的咖啡，喝了一口。

(我難道問不倒這小子了麼)

「持續更新……」

❤️愛心三連擊

1.看到這裏了就點個贊支持下吧，你的「贊」是我創做的動力。

2.關注公衆號前端食堂，「你的前端食堂，記得按時吃飯」！

3. github.com/Geekhyt，感謝Star。