37個常見Vue面試題，增強你的Vue知識儲備！

這篇文章給大家總結分享37個常見Vue面試題，帶你鞏固一波地基，增強你的Vue知識儲備，背就完事了！

相關推薦：2022年大前端面試題總結（收藏）

一、談你對MVVM的理解？

映射關係簡化，隱藏controller MVVM在MVC的基礎上，把控制層隱藏掉了。

Vue不是MVVM框架，它是視圖層框架。 【相關推薦：vue.js影片教學】

ViewModal是一個橋樑，將資料和視圖進行關聯。

二、談談你對Vue中響應式資料的理解？

數組和物件類型的值變化的時候，透過defineReactive方法，借助了defineProperty，將所有的屬性添加了getter和setter。使用者在取值和設定的時候，可以進行一些操作。

缺陷：只能監控最外層的屬性，如果是多層的，就要進行全量遞迴。

get裡面會做依賴蒐集（dep[watcher, watcher]） set裡面會做資料更新（notify，通知watcher更新）

三、Vue中如何偵測陣列的變化？

vue中對陣列沒有進行defineProperty，而是重寫了陣列的7個方法。 分別是：

• push
• shift
• pop
• splice
• unshift
• sort
• reverse

因為這些方法都會改變陣列本身。

陣列裡的索引和長度是無法被監控的。

四、Vue中如何進行依賴收集的？

Vue初始化的時候，掛載之後會進行編譯。產生renderFunction。

當取值的時候，就會蒐集watcher，放到dep裡面。

當使用者更改值的時候，就會通知watcher，去更新視圖。

五、如何理解Vue中的模板編譯原理？

這個問題的核心是如何將template轉換成render函數。

1. 將template模組轉換成ast語法書- parserHTML
2. 對靜態語法做標記（某些節點不改變）
3. 重新產生程式碼- codeGen,使用with語法包裹字串

六、Vue生命週期鉤子是如何實現的?

#Vue的生命週期鉤子是回調函數，當創建元件實例的過程中會呼叫相應的鉤子方法。 內部會對鉤子進行處理，將鉤子函數維護成陣列的形式。

七、Vue元件生命週期有哪些？

• beforeCreate 在實例初始化之後，資料觀測observer 和event、watcher事件配置之前被呼叫
• created 實例已經建立完成，在這一步，以下配置被完成
  • 資料觀測
  • 屬性與方法的運算
  • watch/event時間回呼
  • $el尚未產生
• beforeMount在掛載之前被調用，render尚未被調用
• mounted el被新創建的vm.$el替換，並掛載到實例上去之後調用
• beforeUpdate 資料更新時，被調用，發生在虛擬Dom重新渲染和打補丁之前
• update 由於資料更改導致的虛擬Dom重新渲染和打補丁，在這之後調用
• beforeDestroy 實例銷毀之前調用
• destroyed 實例銷毀之後調用，調用後Vue實例的所有東西都會被解綁，所有的事件監聽會被移除，子實例被銷毀，該鉤子在服務端渲染期間不被調用
• # keep-alive（activated & deactivated）

八、vue.mixin的使用場景和原理?

Vue的mixin的作用就是抽離公共的業務邏輯，原理類似對象的繼承，當元件初始化的時候，會呼叫mergeOptions方法進行合併，採用策略模式針對不同的屬性進行合併。 如果混入的資料和本身組件的資料有衝突，則採用本身的資料為準。

缺點：命名衝突、資料來源不清晰

九、Vue的元件data為什麼必須是一個函數?

new Vue是一個單範例模式，不會有任何的合併操作，所以根實例不必校驗data一定是函數。 元件的data必須是一個函數，是為了防止兩個元件的資料產生污染。 如果都是物件的話，會在合併的時候，指向同一個位址。 而如果是函數的時候，合併的時候調用，會產生兩個空間。

十、請說明nextTick的原理。

nextTick是一個微任務。

• nextTick中的回呼是在下次Dom更新循環結束之後執行的延遲回調
• 可以用來取得更新後的Dom
• Vue中的資料更新是異步的，使用nextTick可以保證使用者定義的邏輯在更新之後執行

十一、computed和watch的差異是什麼？

• computed和watch都是基於watcher來實現的。
• computed的屬性是具備快取的，依賴的值不會發生變化，對其取值時計算屬性方法不會重複執行
• watch是監控值的變化，當值改變的時候，會呼叫回呼函數

十二、Vue.set方法是如何實現的？

• vue為物件和陣列本身都增加了dep屬性
• 當給物件新增不存在的屬性的時候，就會觸發物件依賴的watcher去更新
• 當修改數組索引的時候，就呼叫數組本身的splice方法去更新數組

十三、Vue為什麼要用虛擬Dom

• 虛擬dom就是用js物件來描述真實Dom，是對真實Dom的抽象
• 由於直接操作Dom效能低，但是js層的操作效率高，可以將Dom操作轉換成物件運算。最後透過diff演算法比對差異進行更新Dom
• 虛擬Dom不依賴真實平台環境，可以實現跨平台

#十四、Vue的diff演算法原理是什麼？

Vue的diff演算法是平階比較，不考慮跨層級比較的情況。內部採用深度遞歸的方式雙指標方式比較

• 先比較兩個節點是不是相同節點
• 相同節點比較屬性，再用舊節點
• 先比較兒子節點，考慮舊節點和新節點兒子的情況
• 優化比較：頭頭、尾尾、頭尾、尾頭
• 比對查找，進行複用

十五、既然vue透過資料劫持可以精準的探測資料變化，為什麼還要進行diff偵測差異？

• 響應式資料變化，Vue確實可以在資料變化的時候，響應式系統可以立刻得知。但是如何每個屬性都加上watcher的話，效能會非常的差。
• 粒度過細，會導致更新不精確

所以採用watcher Diff演算法來偵測差異。

十六、請說明key的作用和原則

• Vue在patch過程中，透過key可以判斷兩個虛擬節點是否為相同節點。
• 沒有key會導致更新的時候出問題
• 盡量不要採用索引作為key

十七、談談對元件的理解

• 元件化開發能大幅提升應用開發效率、測試性、重複使用性
• 常用的元件化技術：屬性、自訂事件、插槽
• 降低更新範圍，值重新渲染變化的元件
• 高內聚、低耦合、單向資料流

11、請描述元件的渲染流程

產生元件虛擬節點-> 建立元件的真實節點-> 插入到頁面

#、請描述元件的更新流程

屬性更新會觸發patchVnode方法，元件的虛擬節點會呼叫prepatch鉤子，然後更新屬性，更新元件。

二十、非同步元件原則

先渲染非同步佔位節點 -> 元件載入完畢後呼叫forceUpdate強制更新。

二十一、函數元件的優勢與原理

• 函數式元件的特性：無狀態、無生命週期、無this。因此性能會高一點。

正常的一個元件是一個類別繼承了Vue。

函數式元件，就是一個普通的函數。

二十二、元件的傳值方式有哪些？

1. props和$emit:\text{父元件向子元件傳遞數據，透過}pr\#\#op傳遞。子元件傳遞資料給父元件是透過$##過
2. 通$r$nre
3. #nt$t$rtr
4. s
5. #和
7. listeners 。

父元件透過provide提供，子元件透過inject注入變數

$ref取得實例

eventBus平階元件資料傳遞

Vuex

如果同時遇到的時候，應該考慮先用計算屬性處理數據，在進行v-for，可以減少循環次數。

二十五、v-mode是如何實現的？

在元件上用的v-model，是model和callback

#在普通元素上用v-model，會產生指令，也可能因為不同的元素：

• 產生value和input
• 產生change和radio
• 產生change和checked

指令在什麼時候會呼叫？

源碼：

#二十六、Vue的普通Slot以及作用域Slot的區別

普通插槽

普通插槽是渲染後做替換的工作。父元件渲染完畢後，替換子元件的內容。

在模板編譯的時候，處理元件中的子節點和slot標籤

在建立元素的時候，用_t()方法方法來取代_v()的內容。

作用域插槽

作用域插槽可以拿到子元件裡面的屬性。在子元件中傳入屬性然後渲染。

作用域插槽的編譯結果：

二十八、Vue.use是做什麼的？

Vue.use是用來使用外掛的。我們可以在插件中擴展全域元件、指令、原型方法等。 會呼叫install方法將Vue的建置函數預設傳入，在外掛程式中可以使用vue，無需依賴vue函式庫

二十九、元件寫name有啥好處？

• 增加name屬性，會在components屬性中增加元件本身，實作元件的遞歸呼叫。
• 可以表示元件的具體名稱，方便偵錯和尋找對應的元件。

三十、vue的修飾符有哪些？

• .stop
• .prevent
• .capture
• .self
• .once
• . passive
• .right
• .center
• .middle
• .alt

三十一、如何理解自訂指令？

• 在產生ast語法樹時，遇到指令會為目前元素加上directives屬性
• #透過genDirectives產生指令碼
• 在patch前，將指令的鉤子提取到cbs中，在patch過程中調用對應的鉤子
• 當執行cbs對應的鉤子時，調用對應指令定義方法

#三十二、keep-alive平時在哪裡使用？原理是什麼？

• 使用keep-alive包裹動態元件時，會對元件進行緩存，避免元件重新建立

使用有兩個場景，一個是動態元件，一個是router-view

這裡建立了一個白名單和一個黑名單。表示哪些需要需要做緩存，哪些不需要做快取。以及最大的快取個數。

快取的是元件的實例，用key和value物件儲存。

載入的時候，監控include和exclude。

如果不需要緩存，直接回傳虛擬節點。

如果需要緩存，就用元件的id和標籤名，產生一個key，把目前vnode的instance當作value，存成一個物件。這就是快取清單

如果設定了最大的快取數，就刪除第0個快取。新增最新的快取。

並且為元件加上keepAlive變數為true，當元件初始化的時候，就不再初始化。

三十三、vue-router有幾個鉤子函數？執行流程如何？

鉤子函數有三種：

• 全域守衛
• 路由守衛
• 元件守衛

三十四、vuerouter的兩種模式的區別

• vue-router中有三種模式，分別是hash、history、abstract
• abstract在不支援瀏覽器的API換景使用
• hash模式相容性好，但不美觀，不利於SEO
• history美觀，historyAPI popState，但刷新會出現404

#三十五、談談Vue的效能優化有哪些？

• 資料層級不要過深，合理的設定響應式資料
• 使用資料時，快取值的結果，不頻繁取值
• 合理設定key
• v-show(頻繁切換效能高)和v-if的合理使用
• 控制元件的粒度-> Vue採用元件層級更新
• 採用函數式元件- > 函數式組價開銷低
• 採用非同步元件-> 借助webpack的分包策略
• 使用keep-alive來快取元件
• 虛擬滾動、時間分片等策略
• 打包優化

三十六、談談你對Vuex的理解？

Vuex是專為vue提供的全域狀態管理系統，用於多個元件中的資料共享、資料快取。

問題：無法持久化。

• mutation 主要修改狀態，同步執行
• action 執行業務程式碼，方便重複使用，邏輯可以為非同步。不能直接修改狀態。

三十七、vue中使用了哪些設計模式？

• 單例模式：new多次，只有一個實例

• #工場模式：傳入參數就可以建立實例（虛擬節點的建立）
• 發布訂閱模式：eventBus
• 觀察者模式：watch與dep
• 代理模式：_data屬性、proxy、防手震、節流
• 中介者模式：vuex
• 策略模式
• 外觀模式

原文網址：https://juejin.cn/ post/7043074656047202334

作者：海明月

（學習影片分享：web前端）