歷時兩天半由淺入深總結了20道Vue高頻面試題

作為一個程式員如果你想要找到你心儀的作業，不可避免的就會問到很多八股文，雖然有的和作業沒有半毛錢關系，但是你如果想要通過面試還必須得會，所以我最近開始總結一些面試題，一是為了加強自己的理解能夠找到一份好的作業，二是為了盡可能的幫助更多的小伙伴能夠快速掌握相關知識或者順利通過面試??，

本篇文章介紹了一些vue的常見問題，我盡量將這些問題根據難易程度，相關聯度進行排列使其更好的過度與理解，當然本篇文章不僅僅是八股文那么簡單，作業中經常也會經常用到這些知識點，

vue生命周期

這個問題一般問的不多,但是如果問到了你就必須得答出來

回答

vue父子組件生命周期

這個相對于上一個問題稍微復雜一點,可以試著理解記憶或者直接記住吧

渲染程序

更新程序

銷毀程序

注意
如果子組件是異步組件的話它們的執行順序會發生改變，會先執行完父組件的生命周期然后再執行子組件的生命周期

v-if和v-show

這個問題算是非常基本的題了，它也很好理解，面試一般會問這兩個指令的區別是什么，以及在什么場景下分別用哪個指令合適
回答

1. v-if表示一個dom元素是否被創建，而v-show則是控制這個dom元素的display屬性是否為none
2. 一般在頻繁切換狀態的地方使用v-show,v-if則更適合條件不經常改變的場景，因為它切換開銷相對較大

v-for和v-if優先級

這個問題被問到的頻率還是比較高的，雖然它在實際開發中并不會這么用，

回答

1. 開發程序中一般不建議同時將v-for和v-if放在一個標簽中使用
2. Vue2中v-for的優先級會更高，所以會先執行回圈，再進行v-if判斷，所以這樣就會導致無論需不需展示這個元素，都會先遍歷整個串列
3. 在Vue3中v-if的優先級會更高，但是當我們遍歷一個陣列的時候，根據陣列中的某個元素進行v-if判斷的時候就會報錯，因為v-if會先執行此時還沒有拿到這個陣列，所以Vue3中依然不建議這樣使用

說一下computed和watch

computed和watch實際作業中用的比較多,所以問的也比較多,一般理解了基本都能回答上來

1. computed是計算屬性,當一個屬性受一個或者多個屬性影響的時候可以使用.watch是偵聽器,當我們需要根據一個屬性的變化而做出一些處理的時候,可以使用watch來對這個屬性進行監聽
2. computed具有快取的特點,即當它所依賴的屬性發生改變的時候它才會重新執行內部邏輯.如下代碼

<template>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
    console.log('內部邏輯執行')
    return a.value + b.value
})
</script>

頁面多次使用addSum,但是只會列印一次"內部邏輯執行"

3. watch在頁面首次加載的時候默認不會執行,需要設定immediate:true首次才會執行監聽
4. watch默認只監聽一層資料,不監聽多層資料里屬性的變化,需要設定deep:true才會進行深度監聽

vue-router

關于vue-router能問的問題非常多，比如它的實作原理，路由跳轉，路由守衛等等，所以建議去系統的查看vue-router檔案

問題1：vue-router是什么，描述一下它的原理？

Vue Router是Vue官方的路由管理器，有hash和history兩種模式

hash模式是通過監聽hashchange事件來實作更新頁面部分內容的操作，url后面會帶有#號

history模式則是通過監聽popstate事件來實作更新頁面部分內容的操作原理和hash模式差不多，只不過url后面不會出現#會顯得更加美觀，同時會帶來一個問題，因為沒有#號，所以當用戶重繪頁面時會向服務器發請求導致請求資源為404，因此需要對nginx進行一個配置，需要把所有路由都重定向到根頁面

問題2：路由跳轉方式有哪些？

1. 內置組件跳轉
2. router.push({ path: '/home' }),router.replace({ path: '/home' })

問題3:說一下路由守衛？

路由守衛分為全域路由守衛，路由獨享守衛，組件路由守衛

• 全域路由守衛

1. beforeEach,接收to、from、next三個引數，每個路由跳轉前都會觸發，登錄驗證時用的比較多
2. beforeResolve，和beforeEach類似，區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被決議之后呼叫
3. afterEach，在路由跳轉完成后呼叫，接收to、from兩個引數

• 路由獨享守衛

beforeEnter,一般配置在路由組態檔中（router/index.js），對進入某個路由之前進行相關操作

• 組件路由守衛

接收to、from、next三個引數

1. beforeRouteEnter,進入該組件之前呼叫，無法獲取到vue實體

2. beforeRouteUpdate，在當前路由改變，但是該組件被復用時呼叫

3. beforeRouteLeave, 在離開當前組件時呼叫

vue2和vue3區別

當面試問你會用vue3嗎,如果你回答會用的話,那么大概率會問vue2和vue3有哪些區別,最近我去面試的時候百分之90都問了這個問題，

回答

1. 寫法上的區別:vue2使用的是options(選項)Api,vue3的是composition Api(當然vue3也兼容composition api)，options Api中methods，compute，data等api都是分散的，而composition api中的代碼是根據邏輯功能來組織的,我們可以將一個功能所定義的methods，compute，data等api會放在一起,讓我們可以更靈活地組合組件邏輯，
2. vue2將回應式資料放到data函式中,而vue3則是使用ref和reactive將資料宣告為回應式
3. 回應式實作方式:vue2中是通過Object.defineProperty對資料劫持實作的,vue3中則是使用Proxy對資料代理實作的，
4. 生命周期區別:vue3中將beforeCreate和created合并到了setup函式中
5. 根節點: vue3組件允許多個根節點,而vue2只允許一個
6. 內置組件: vue3新增了傳送組件Teleport和異步依賴處理組件Suspense

vue插件使用

面試一般會問你如何寫一個vue插件,所以沒寫過vue插件的最好去親自體驗一下

回答:

vue實體會有一個use函式,它接受的是一個帶有install函式的物件和一個可選的選項物件,當我們使用 vue.use(plugin)或者app.use(plugin)會呼叫我們插件的install屬性的函式,并且將當前組件的實體傳進來.所以在插件中就可以對這個實體進行一些操作來實作我們插件的功能

vue插槽

插槽slot可以理解為占坑，當使用一個組件的時候，在組件標簽里的對應的內容就會替換掉這個組件中的slot標簽，

插槽分為默認插槽，具名插槽，作用域插槽，

默認插槽
子組件中用slot標簽來確定渲染位置，父組件使用它時直接在子組件的標簽內寫入內容即可

//子組件
<template>
    <slot />
</template>

//父組件
<Child>
  <div>默認插槽</div>  
</Child>

具名插槽

顧名思義就是具有名字的插槽，子組件中可以用name熟悉對slot命名，父組件在使用的時候通過
template中的v-slot:name或者#name來定義這個插槽中的內容

//子組件
<template>
  <slot name="content"></slot>
</template>

//父組件
<Child>
    <template v-slot:content>具名插槽內容</template>
</Child>

作用域插槽

子組件中的slot可以通過類似組件屬性傳遞的方式將子組件的值傳遞給父組件中這個子組件的插槽內容中（子組件標簽內），在父組件使用子組件的時候要用v-slot的值進行接收這些引數，默認插槽可以將其直接寫在子組件標簽上，具名插槽則寫在template上，而傳過來的值只能在子組件標簽中或者template標簽中使用，所以在父組件作用域中獲取到了子組件作用域中的變數，可以認為作用域插槽延伸了子組件資料的作用范圍，因此叫做作用域插槽

如果你想詳細理解插槽的作用可以閱讀這篇文章Vue3中插槽(slot)用法匯總 - 掘金 (juejin.cn)

組件通信

這里我大概歸納了一下vue2和vue3的傳參方式

它們的具體用法可以參考我的這篇文章盤點Vue2和Vue3的10種組件通信方式(值得收藏) - 掘金 (juejin.cn)

除了上面的傳參方式你也可以回答Vuex和Pinia，前提你了解這兩個狀態管理器，因為你說了大概率下個問題就會問你Vuex和Pinia

vuex

面試問到這個問題的時候，不要上來就開始說什么state,mutation...，你要先闡述Vuex干嘛用的，什么時候需要用Vuex，

回答

1. Vuex是Vue中的全域狀態管理框架，它可以管理應用的所有組件的狀態，并不是每個專案都需要引入Vuex的，當我們的專案有很多個頁面，并且這些頁面共享著多個資料狀態，此時我們可以引入Vuex，
2. Vuex有三個核心的概念，state,mutations,actions,其中state為存放資料的地方，mutations中的函式作用則是用來修改state，actions中一般是用了處理一些異步操作的函式，
3. Vuex除了上面三個概念還有getters,moudles，getters就像Vue中的計算屬性computed一樣用來描述依賴回應式狀態state中的復雜邏輯，moudles則是可以將store分割成模塊（module），每個模塊都擁有自己的state,mutations,actions等，在大型應用中經常用到
4. 場景：當我們異步獲取結果并賦值給state的時候，比如資料請求，我們可以在actions中進行資料請求，拿到結果通過它的dispatch方法呼叫mutations中修改state的函式，從而將結果賦值給了state

pinia

這個現在問的好像不多，從我最近面試來看只有我提到了才會問一下，但是以后問的肯定會越來越多，關于pinia問的一般是它和Vuex的區別，確切的說應該是它和Vuex4之間的區別

回答

pinia其實就是Vuex5，它和Vuex的主要區別有以下幾點

1. Pinia使用更簡單，更符合開發者的開發習慣

2. pinia中沒有了mutations,狀態state的修改可以直接進行修改，或者在actions中修改，或者使用它的$patch方法進行修改

3. pinia中沒有了modules,如果想使用多個store，直接使用defineStore定義多個store傳入不同的id即可

4. 更好的TS支持，不需要創建自定義的復雜包裝器來支持TS

vue自定義指令

vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令，除此之外vue 還允許開發者自定義指令，面試經常會問什么是自定義指令?你用自定義指令做過哪些功能?

回答1:什么是自定義指令?

1. 自定義指令包含區域指令和全域指令,在模板中使用指令前必須先使用directives選項注冊，區域指令指在某個組件中注冊,而全域則是將指令注冊到全域,通常在main.js中注冊，
2. 自定義指令由一個包含類似組件生命周期鉤子的物件來定義，它的生命周期鉤子包含created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted,
3. 常用的鉤子為mounted 和 updated,它接受el,binding等引數.binding引數的值一般包含系結到這個元素上的資訊,比如下面這個指令

<div v-example:foo.bar="baz">

它的binding會是這個物件

 {
    arg: 'foo',
    modifiers: { bar: true },
    value: /* `baz` 的值 */,
    oldValue: /* 上一次更新時 `baz` 的值 */ 
 }

回答2:你用自定義指令做過哪些功能?

1. 資料埋點,通過系結自定義事件傳入點擊當前元素需要埋點的事件名,在指令中監聽當前元素的點擊事件后呼叫后臺介面將事件名傳入
2. 權限控制,通過系結自定義事件傳入控制當前元素的權限欄位,在指令中獲取到當前元素根據權限欄位來控制該元素的狀態(顯示,隱藏等)
3. ...

keep-alive

官網描述

<KeepAlive> 是一個內置組件，它的功能是在多個組件間動態切換時快取被移除的組件實體，

回答

1. 通常我們切換組件的時候，上一個組件就會被銷毀，而當我們使用<KeepAlive>將其包裹的話這個組件就會被快取，當這個組件再一次被顯示時就會保留之前的狀態，
2. keep-alive接收兩個屬性include 和 exclude，分別代表哪些組件要用快取和哪些不需要快取，它接收組件的名字陣列，字串或者正則，當我們使用動態組件component或者路由router-view的時候可以使用
3. keep-alive還接收max屬性表示最大快取實體數，如果超出這個數則最久沒有被訪問的快取實體將被銷毀，
4. keep-alive有兩個生命周期，分別是activated和deactivated，activated鉤子會在首次掛載或者每次從快取中被重新插入的時候呼叫，deactivated鉤子則是在組件從DOM上移除或者組件卸載時呼叫

vue2混入-Mixin

vue3中已經沒有Mixin這個概念了，所以未來被問到的幾率會越來越小，但是目前被問到的頻率還是很高的，一般會它的概念以及優缺點，有時還會問它與父組件的生命周期執行順序

vue官網描述：

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能，一個混入物件可以包含任意組件選項，當組件使用混入物件時，所有混入物件的選項將被“混合”進入該組件本身的選項，

回答
1.Mixin的作用將組件的公共邏輯提取出來，哪個組件需要用到時，直接將提取的這部分混入到組件內部即可
2. Mixin的生命周期會在父組件生命周期之前執行，如果Mixin中的屬性或者方法與父組件沖突則會使用父組件中的
2. 優點：可以降低代碼冗余提高邏輯復用性，
3. 缺點：命名容易沖突，不好追溯源，后期排查不方便

vue回應式原理

這道題問道的頻率極高,就我經歷的多場面試幾乎都會問到,而且是面試到vue方面的開門題，

下面是我自己的理解回答,以vue2為例,大家可以借鑒參考

1. vue的回應式原理是根據Object.defineProperty這個api來對資料進行劫持并結合發布者-訂閱者模式實作的

2. 首先會利用Object.defineProperty中的get函式來對vue中的data的所有屬性進行訪問劫持,中間會涉及到劫持data中更深層次的屬性需要遞回呼叫劫持方法，這里是通過一個Observer類實作的

3. 劫持到每一個屬性后會給這個屬性系結多個訂閱者watcher,因為一個屬性可能被用在很多地方;而這個watcher中則包含更新視圖的函式update，

4. watcher和屬性的對應關系以及和視圖的聯系則是通過編譯模板Compile類來實作的，Compile中會拿到整個dom物件,然后遍歷元素子節點獲取到使用過vue中data屬性的則給該屬性直接添加一個watcher并賦予一些更新當前視圖的方法.

5. 每個屬性的多個訂閱者watcher都會被添加到對應的陣列中,這里則是通過Deps類實作的,初始化watcher的時候會呼叫Deps中的addSub方法將對應watcher添加該類的Subs陣列中

6. 當data中的某個屬性發生改變時則會觸發Object.defineProperty中的set函式,這時便會呼叫該屬性的Deps類中的notify函式遍歷Subs陣列中的訂閱者watcher并呼叫其函式update去觸發視圖的更新

Object.defineProperty和proxy區別

一般問完回應式原理可能會問這兩者的區別

回答

1. Object.defineProperty 只能代理屬性，Proxy 代理的是物件，
2. 物件上新增屬性，Proxy可以監聽到，Object.defineProperty不能，
3. Object.defineProperty 的代理行為是在破壞原物件的基礎上實作的，Proxy 則不會破壞原物件，只是在原物件上覆寫了一層，
4. 陣列新增修改，Proxy可以監聽到，Object.defineProperty不能，
5. Proxy不兼容IE11及以下

vue3內置組件

vue3新增了兩個內置組件分別是Teleport和Suspense，

• Teleport組件

可以稱之為傳送門，作用將其插槽內容渲染到 DOM 中的另一個位置，接收兩個引數to（要去的位置）和disabled（是否留在原位置），接收比如下面代碼

<teleport to="#popup"> 
    <video src="https://www.cnblogs.com/zdsdididi/archive/2022/10/17/my-movie.mp4"> 
</teleport>

video將會被傳送到id為popup的元素下，

• Suspense組件

1. <Suspense> 組件用于協調對組件樹中嵌套的異步依賴的處理，
2. 它一般用于包裹多個異步組件處理多個異步組件加載前與完成后的統一狀態
3. <Suspense> 組件有兩個插槽：#default 和 #fallback,在初始渲染時，<Suspense> 將在記憶體中渲染其默認的插槽內容，如果在這個程序中遇到任何異步依賴，則會進入掛起狀態等待異步組件加載完畢，在掛起狀態期間，展示的是 #fallback插槽內容

nextTick及原理

關于nextTick會問到它的用法,然后是它的原理,然后還可能問到JS的時間回圈機制，

問題1:vue中的nextTick是干什么用的?

這個其實比較簡單,用過都知道它是干嘛的,vue官方的解釋是:

在下次 DOM 更新回圈結束之后執行延遲回呼，在修改資料之后立即使用這個方法，獲取更新后的 DOM，

這是什么意思呢,其實vue中修改data不會立刻觸發dom更新;而是把需要更新的Watcher加入到queueWatcher佇列中,然后在合適的時機在nextTick中呼叫這些Watcher的更新函式進行dom更新,所以在data剛被修改的時候,我們是獲取不到更新后的dom的,這時候便需要呼叫nextTick函式在它的回呼函式中獲取到變化后的dom

問題2:nextTick原理

1. nextTick原理是借助瀏覽器事件回圈來完成的,因為每次事件回圈之間都有一次視圖渲染,nextTick盡量在視圖渲染之前完成dom更新,所以nextTick優先使用的是promise(微任務)實作
2. 每次執行nextTick時會將傳入的回呼函式放入一個佇列中(callbacks陣列),然后當在本次事件回圈的同步代碼執行完畢后開啟一個微任務(promise或者MutationObserver)去依次執行這個callbacks中的回呼函式，
3. 但是當瀏覽器不支持promise的時候在vue2中會進行進行降級處理,依次使用setImmediate、setTimeout開啟一個宏任務執行callbacks
4. 當一個data資料更新時對應的watcher便會呼叫一次nextTick,將它對應的dom更新操作作為回呼函式放入callbacks中,所以當我們想獲取這個data更新后的dom需要在其值變化后也呼叫nextTick將回呼函式傳入排在上個更新dom的回呼函式后面,所以我們可以在這個nextTick的回呼函式中獲取到更新后的data

問題3:js事件回圈機制

不屬于vue,后面文章再介紹

vue虛擬dom,diff演算法

這題在作業中有用嗎是??？？答案是沒有用，但是在面試中有用啊，所以我們要會回答??

問題1：什么是虛擬dom？

簡單來說就是一個描述dom結構的js物件

問題2：為什么要用虛擬dom？

1. 每當我們用原生JS或者JQ操作DOM時，瀏覽器會從頭開始進行DOM樹的構建，頻繁的操作DOM開銷是很大的，
2. 而虛擬DOM就是為了減少這些操作的，虛擬DOM首先會通過狀態生成一個虛擬節點樹（js物件），然后使用虛擬節點樹進行渲染，當某些狀態發生變更時會生成新的虛擬DOM節點樹，然后與上一次虛擬DOM節點樹進行比較（diff），從而找到差異的部分，最后渲染到真實的DOM節點上面

問題3：說一下diff演算法

diff演算法的本質是找出兩個物件之間的差異，目的是盡可能復用節點，在vue中是當狀態發生改變，用來計算改變后的虛擬DOM與改變前的虛擬DOM之間的差異的演算法，

具體實作不是幾句話就能說清楚的，推薦一篇文章聊聊 Vue 的雙端 diff 演算法 - 掘金 (juejin.cn)

結語

以上問題基本都是查閱部分資料結合自己的理解總結而來，所以難免會有一些錯誤以及不妥之處，如果你發現了還希望不吝指出，萬分感謝，

最后，創作不易，如果這篇文章對你有所幫助，還希望給個贊??鼓勵一下作者吧！

標籤：其他

上一篇：JavaScript輸入輸出陳述句propmt、alert、console

下一篇：HTTP協議及狀態碼