Vue高頻面試題??

一、組件通信相關(guān)問題

1. 組件通信方式有哪些？

父子組件通信：

props 和 $emit、v-model、 .sync、 ref、$bus、$attrs、$listeners、$parent、$children、$root、provide、inject、vuex

2. 子組件為什么不可以修改父組件傳遞的Prop？

Vue提倡單向數(shù)據(jù)流,即父級(jí) props 的更新會(huì)流向子組件,但是反過來則不行。這是為了防止意外的改變父組件狀態(tài)，使得應(yīng)用的數(shù)據(jù)流變得難以理解。如果破壞了單向數(shù)據(jù)流，當(dāng)應(yīng)用復(fù)雜時(shí)，debug 的成本會(huì)非常高。

3. Vuex和單純的全局對(duì)象有什么區(qū)別？

Vuex和全局對(duì)象主要有兩大區(qū)別：

1.Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

2.不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。

4. 為什么 Vuex 的 mutation 中不能做異步操作？

Vuex中所有的狀態(tài)更新的唯一途徑都是mutation，異步操作通過 Action 來提交 mutation實(shí)現(xiàn)，這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。

每個(gè)mutation執(zhí)行完成后都會(huì)對(duì)應(yīng)到一個(gè)新的狀態(tài)變更，這樣devtools就可以打個(gè)快照存下來，然后就可以實(shí)現(xiàn) time-travel 了。如果mutation支持異步操作，就沒有辦法知道狀態(tài)是何時(shí)更新的，無法很好的進(jìn)行狀態(tài)的追蹤，給調(diào)試帶來困難。

5.組件中 data 為什么是一個(gè)函數(shù)？

因?yàn)榻M件是用來復(fù)用的，且 JS 里對(duì)象是引用關(guān)系，如果組件中 data 是一個(gè)對(duì)象，那么這樣作用域沒有隔離，子組件中的 data 屬性值會(huì)相互影響，如果組件中 data 選項(xiàng)是一個(gè)函數(shù)，那么每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，組件實(shí)例之間的 data 屬性值不會(huì)互相影響；而 new Vue 的實(shí)例，是不會(huì)被復(fù)用的，因此不存在引用對(duì)象的問題

6. Vue 的父組件和子組件生命周期鉤子執(zhí)行順序是什么？

渲染過程：

父組件掛載完成一定是等子組件都掛載完成后，才算是父組件掛載完，所以父組件的mounted在子組件mouted之后

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

子組件更新過程：

1.影響到父組件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted

2.不影響父組件： 子beforeUpdate -> 子updated

父組件更新過程：

1.影響到子組件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted

2.不影響子組件： 父beforeUpdate -> 父updated

銷毀過程：

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

看起來很多好像很難記憶，其實(shí)只要理解了，不管是哪種情況，都一定是父組件等待子組件完成后，才會(huì)執(zhí)行自己對(duì)應(yīng)完成的鉤子，就可以很容易記住。

二、相關(guān)屬性的作用 & 相似屬性對(duì)比

7. v-show 和 v-if 有哪些區(qū)別？

v-if 會(huì)在切換過程中對(duì)條件塊的事件監(jiān)聽器和子組件進(jìn)行銷毀和重建，如果初始條件是false，則什么都不做，直到條件第一次為true時(shí)才開始渲染模塊。

v-show 只是基于css進(jìn)行切換，不管初始條件是什么，都會(huì)渲染。

所以，v-if 切換的開銷更大，而 v-show 初始化渲染開銷更大，在需要頻繁切換，或者切換的部分dom很復(fù)雜時(shí)，使用 v-show 更合適。渲染后很少切換的則使用 v-if 更合適。

8. computed 和 watch 有什么區(qū)別？

computed 計(jì)算屬性，是依賴其他屬性的計(jì)算值，并且有緩存，只有當(dāng)依賴的值變化時(shí)才會(huì)更新。

watch 是在監(jiān)聽的屬性發(fā)生變化時(shí)，在回調(diào)中執(zhí)行一些邏輯。

所以，computed 適合在模板渲染中，某個(gè)值是依賴了其他的響應(yīng)式對(duì)象甚至是計(jì)算屬性計(jì)算而來，而 watch 適合監(jiān)聽某個(gè)值的變化去完成一段復(fù)雜的業(yè)務(wù)邏輯。

9. computed vs methods

計(jì)算屬性是基于他們的響應(yīng)式依賴進(jìn)行緩存的，只有在依賴發(fā)生變化時(shí)，才會(huì)計(jì)算求值，而使用 methods，每次都會(huì)執(zhí)行相應(yīng)的方法。

10. keep-alive 的作用是什么？

keep-alive 可以在組件切換時(shí)，保存其包裹的組件的狀態(tài)，使其不被銷毀，防止多次渲染。

其擁有兩個(gè)獨(dú)立的生命周期鉤子函數(shù) actived 和 deactived，使用 keep-alive 包裹的組件在切換時(shí)不會(huì)被銷毀，而是緩存到內(nèi)存中并執(zhí)行 deactived 鉤子函數(shù)，命中緩存渲染后會(huì)執(zhí)行 actived 鉤子函數(shù)。

11. Vue 中 v-html 會(huì)導(dǎo)致什么問題

在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML，很容易導(dǎo)致 XSS 攻擊。所以只能在可信內(nèi)容上使用 v-html，且永遠(yuǎn)不能用于用戶提交的內(nèi)容上。

12.你使用過 Vuex 嗎？

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）?！皊tore” 基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。

（1）Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

（2）改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化。

主要包括以下幾個(gè)模塊：

State：定義了應(yīng)用狀態(tài)的數(shù)據(jù)結(jié)構(gòu)，可以在這里設(shè)置默認(rèn)的初始狀態(tài)。

Getter：允許組件從 Store 中獲取數(shù)據(jù)，mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性。

Mutation：是唯一更改 store 中狀態(tài)的方法，且必須是同步函數(shù)。

·Action：用于提交 mutation，而不是直接變更狀態(tài)，可以包含任意異步操作。

Module：允許將單一的 Store 拆分為多個(gè) store 且同時(shí)保存在單一的狀態(tài)樹中。

13.寫 Vue 項(xiàng)目時(shí)為什么要在列表組件中寫 key，其作用是什么？

vue和react都是采用diff算法來對(duì)比新舊虛擬節(jié)點(diǎn)，從而更新節(jié)點(diǎn)。在vue的diff函數(shù)中。

在交叉對(duì)比中，當(dāng)新節(jié)點(diǎn)跟舊節(jié)點(diǎn)頭尾交叉對(duì)比沒有結(jié)果時(shí)，會(huì)根據(jù)新節(jié)點(diǎn)的key去對(duì)比舊節(jié)點(diǎn)數(shù)組中的key，從而找到相應(yīng)舊節(jié)點(diǎn)（這里對(duì)應(yīng)的是一個(gè)key => index 的map映射）。如果沒找到就認(rèn)為是一個(gè)新增節(jié)點(diǎn)。而如果沒有key，那么就會(huì)采用遍歷查找的方式去找到對(duì)應(yīng)的舊節(jié)點(diǎn)。一種一個(gè)map映射，另一種是遍歷查找。相比而言。map映射的速度更快。

可以簡(jiǎn)單的這樣理解：加了key(一定要具有唯一性) id的checkbox跟內(nèi)容進(jìn)行了一個(gè)關(guān)聯(lián)。是我們想達(dá)到的效果

三、原理分析相關(guān)題目

這部分的面試題，只看答案部分是不夠的，最好結(jié)合源碼來分析，可以有更深的理解。我在之前的文章對(duì)某些源碼做過分析的，會(huì)給出鏈接。

14. Vue 的響應(yīng)式原理

如果面試被問到這個(gè)問題，又描述不清楚，可以直接畫出 Vue 官方文檔的這個(gè)圖，對(duì)著圖來解釋效果會(huì)更好。

Vue 的響應(yīng)式是通過 Object.defineProperty 對(duì)數(shù)據(jù)進(jìn)行劫持，并結(jié)合觀察者模式實(shí)現(xiàn)。 Vue 利用 Object.defineProperty 創(chuàng)建一個(gè) observe 來劫持監(jiān)聽所有的屬性，把這些屬性全部轉(zhuǎn)為 getter 和 setter。Vue 中每個(gè)組件實(shí)例都會(huì)對(duì)應(yīng)一個(gè) watcher 實(shí)例，它會(huì)在組件渲染的過程中把使用過的數(shù)據(jù)屬性通過 getter 收集為依賴。之后當(dāng)依賴項(xiàng)的 setter 觸發(fā)時(shí)，會(huì)通知 watcher，從而使它關(guān)聯(lián)的組件重新渲染。

15. Object.defineProperty有哪些缺點(diǎn)？

這道題目也可以問成 “為什么vue3.0使用proxy實(shí)現(xiàn)響應(yīng)式？” 其實(shí)都是對(duì)Object.defineProperty 和 proxy實(shí)現(xiàn)響應(yīng)式的對(duì)比。

1.Object.defineProperty 只能劫持對(duì)象的屬性，而 Proxy 是直接代理對(duì)象

由于 Object.defineProperty 只能對(duì)屬性進(jìn)行劫持，需要遍歷對(duì)象的每個(gè)屬性。而 Proxy 可以直接代理對(duì)象。

2.Object.defineProperty 對(duì)新增屬性需要手動(dòng)進(jìn)行 Observe， 由于 Object.defineProperty 劫持的是對(duì)象的屬性，所以新增屬性時(shí)，需要重新遍歷對(duì)象，對(duì)其新增屬性再使用 Object.defineProperty 進(jìn)行劫持。 也正是因?yàn)檫@個(gè)原因，使用 Vue 給 data 中的數(shù)組或?qū)ο笮略鰧傩詴r(shí)，需要使用 vm.$set 才能保證新增的屬性也是響應(yīng)式的。

3.Proxy 支持13種攔截操作，這是 defineProperty 所不具有的。

4.新標(biāo)準(zhǔn)性能紅利

Proxy 作為新標(biāo)準(zhǔn)，長(zhǎng)遠(yuǎn)來看，JS引擎會(huì)繼續(xù)優(yōu)化 Proxy ，但 getter 和 setter 基本不會(huì)再有針對(duì)性優(yōu)化。

5.Proxy 兼容性差 目前并沒有一個(gè)完整支持 Proxy 所有攔截方法的Polyfill方案

16. 組件的 data 為什么要寫成函數(shù)形式？

Vue 的組件都是可復(fù)用的，一個(gè)組件創(chuàng)建好后，可以在多個(gè)地方復(fù)用，而不管復(fù)用多少次，組件內(nèi)的 data 都應(yīng)該是相互隔離，互不影響的，所以組件每復(fù)用一次，data 就應(yīng)該復(fù)用一次，每一處復(fù)用組件的 data 改變應(yīng)該對(duì)其他復(fù)用組件的數(shù)據(jù)不影響。

為了實(shí)現(xiàn)這樣的效果，data 就不能是單純的對(duì)象，而是以一個(gè)函數(shù)返回值的形式，所以每個(gè)組件實(shí)例可以維護(hù)獨(dú)立的數(shù)據(jù)拷貝，不會(huì)相互影響。

17. v-for 中 key 的作用是什么？

key 是給每個(gè) vnode 指定的唯一 id，在同級(jí)的 vnode diff 過程中，可以根據(jù) key 快速的對(duì)比，來判斷是否為相同節(jié)點(diǎn)，并且利用 key 的唯一性可以生成 map 來更快的獲取相應(yīng)的節(jié)點(diǎn)。

另外指定 key 后，就不再采用“就地復(fù)用”策略了，可以保證渲染的準(zhǔn)確性。

18. 為什么 v-for 和 v-if 不建議用在一起

當(dāng) v-for 和 v-if 處于同一個(gè)節(jié)點(diǎn)時(shí)，v-for 的優(yōu)先級(jí)比 v-if 更高，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。如果要遍歷的數(shù)組很大，而真正要展示的數(shù)據(jù)很少時(shí)，這將造成很大的性能浪費(fèi)。

這種場(chǎng)景建議使用 computed，先對(duì)數(shù)據(jù)進(jìn)行過濾。

19.什么是mvvm?

（1）View 層

View 是視圖層，也就是用戶界面。前端主要由 HTML 和 CSS 來構(gòu)建 。

（2）Model 層

Model 是指數(shù)據(jù)模型，泛指后端進(jìn)行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控，對(duì)于前端來說就是后端提供的 api 接口。

（3）ViewModel 層

ViewModel 是由前端開發(fā)人員組織生成和維護(hù)的視圖數(shù)據(jù)層。在這一層，前端開發(fā)者對(duì)從后端獲取的 Model 數(shù)據(jù)進(jìn)行轉(zhuǎn)換處理，做二次封裝，以生成符合 View 層使用預(yù)期的視圖數(shù)據(jù)模型。需要注意的是 ViewModel 所封裝出來的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分，而 Model 層的數(shù)據(jù)模型是只包含狀態(tài)的，比如頁面的這一塊展示什么，而頁面加載進(jìn)來時(shí)發(fā)生什么，點(diǎn)擊這一塊發(fā)生什么，這一塊滾動(dòng)時(shí)發(fā)生什么這些都屬于視圖行為（交互），視圖狀態(tài)和行為都封裝在了 ViewModel 里。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。

MVVM 框架實(shí)現(xiàn)了雙向綁定，這樣 ViewModel 的內(nèi)容會(huì)實(shí)時(shí)展現(xiàn)在 View 層，前端開發(fā)者再也不必低效又麻煩地通過操縱 DOM 去更新視圖，MVVM 框架已經(jīng)把最臟最累的一塊做好了，我們開發(fā)者只需要處理和維護(hù) ViewModel，更新數(shù)據(jù)視圖就會(huì)自動(dòng)得到相應(yīng)更新。這樣 View 層展現(xiàn)的不是 Model 層的數(shù)據(jù)，而是 ViewModel 的數(shù)據(jù)，由 ViewModel 負(fù)責(zé)與 Model 層交互，這就完全解耦了 View 層和 Model 層，這個(gè)解耦是至關(guān)重要的，它是前后端分離方案實(shí)施的重要一環(huán)。

四、路由相關(guān)問題

20. Vue-router 導(dǎo)航守衛(wèi)有哪些

全局前置/鉤子：beforeEach、beforeResolve、afterEach

路由獨(dú)享的守衛(wèi)：beforeEnter

組件內(nèi)的守衛(wèi)：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

完整的導(dǎo)航解析流程如下：

1.導(dǎo)航被觸發(fā)。

2.在失活的組件里調(diào)用離開守衛(wèi)。

3.調(diào)用全局的 beforeEach 守衛(wèi)。

4.在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。

5.在路由配置里調(diào)用 beforeEnter。

6.解析異步路由組件。

7.在被激活的組件里調(diào)用 beforeRouteEnter。

8.調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。

9.導(dǎo)航被確認(rèn)。

10.調(diào)用全局的 afterEach 鉤子。

11.觸發(fā) DOM 更新。

12.用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

21. vue-router hash 模式和 history 模式有什么區(qū)別？

區(qū)別：

1.url 展示上，hash 模式有“#”，history 模式?jīng)]有

2.刷新頁面時(shí)，hash 模式可以正常加載到 hash 值對(duì)應(yīng)的頁面，而 history 沒有處理的話，會(huì)返回 404，一般需要后端將所有頁面都配置重定向到首頁路由。

3.兼容性。hash 可以支持低版本瀏覽器和 IE。

22. vue-router hash 模式和 history 模式是如何實(shí)現(xiàn)的？

hash 模式：

#后面 hash 值的變化，不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求，瀏覽器不發(fā)出請(qǐng)求，就不會(huì)刷新頁面。同時(shí)通過監(jiān)聽 hashchange 事件可以知道 hash 發(fā)生了哪些變化，然后根據(jù) hash 變化來實(shí)現(xiàn)更新頁面部分內(nèi)容的操作。

history 模式：

history 模式的實(shí)現(xiàn)，主要是 HTML5 標(biāo)準(zhǔn)發(fā)布的兩個(gè) API，pushState 和 replaceState，這兩個(gè) API 可以在改變 url，但是不會(huì)發(fā)送請(qǐng)求。這樣就可以監(jiān)聽 url 變化來實(shí)現(xiàn)更新頁面部分內(nèi)容的操作。

23.說說你對(duì)spa單頁面的理解？

SPA（ single-page application ）僅在 Web 頁面初始化時(shí)加載相應(yīng)的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁面的重新加載或跳轉(zhuǎn)；取而代之的是利用路由機(jī)制實(shí)現(xiàn) HTML 內(nèi)容的變換，UI 與用戶的交互，避免頁面的重新加載。

優(yōu)點(diǎn)：

用戶體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個(gè)頁面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染

基于上面一點(diǎn)，SPA 相對(duì)對(duì)服務(wù)器壓力小

前后端職責(zé)分離，架構(gòu)清晰，前端進(jìn)行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理

缺點(diǎn)：

初次加載耗時(shí)多：為實(shí)現(xiàn)單頁 Web 應(yīng)用功能及顯示效果，需要在加載頁面的時(shí)候?qū)?JavaScript、CSS 統(tǒng)一加載，部分頁面按需加載

前進(jìn)后退路由管理：由于單頁應(yīng)用在一個(gè)頁面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進(jìn)后退功能，所有的頁面切換需要自己建立堆棧管理

SEO 難度較大：由于所有的內(nèi)容都在一個(gè)頁面中動(dòng)態(tài)替換顯示，所以在 SEO 上其有著天然的弱勢(shì)

24.怎么理解vue的單向數(shù)據(jù)流？

所有的prop都使得其父子prop之間形成了一個(gè)單向下行綁定：父級(jí)prop的更新會(huì)向下流動(dòng)到子組件中，但是反過來則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

額外的，每次父級(jí)組件發(fā)生更新時(shí)，子組件中所有的prop都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變prop。如果你這樣做了，Vue會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。子組件想修改時(shí)，只能通過$emit派發(fā)一個(gè)自定義事件，父組件接收到后，由父組件修改。

有兩種常見的試圖改變一個(gè)prop的情形：

這個(gè)prop用來傳遞一個(gè)初始值。這個(gè)子組件接下來希望將其作為一個(gè)本地的prop數(shù)據(jù)來使用。在這種情況下，最好定義一個(gè)本地的data屬性并將這個(gè)prop用作其初始值：

props: ['initialCounter'],data: function () {

? return {

? ? counter: this.initialCounter

? }

}

這個(gè)prop以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下，最好使用這個(gè)prop的值來定義一個(gè)計(jì)算屬性

props: ['size'],computed: {

? normalizedSize: function () {

? ? return this.size.trim().toLowerCase()

? }

}

25.$route 和 $router 的區(qū)別

$router 為 VueRouter 實(shí)例，想要導(dǎo)航到不同 URL，則使用 $router.push 方法。

$route 為當(dāng)前 router 跳轉(zhuǎn)對(duì)象里面可以獲取 name 、 path 、 query 、 params 等。

內(nèi)容有些多，大家可以先點(diǎn)贊收藏，但一定要去看。當(dāng)你把大廠面試題知識(shí)點(diǎn)都看完并且理解了，以后就沒有你過不了的前端面試。資源都幫你整理好了，還不學(xué)就有些說不過去了。

更多學(xué)習(xí)資料以及面試題庫(kù)，需要的伙伴點(diǎn)擊下方可以無償獲取?。?/strong>

更多優(yōu)質(zhì)視頻

標(biāo)簽：