前端面試：Vue.js常見的問題

摘自今日頭條用戶：代碼開發

原文鏈接： 

https://www.toutiao.com/a6683120112255369732/?tt_from=mobile_qq&utm_campaign=client_share&timestamp=1560735550&app=news_article&utm_source=mobile_qq&utm_medium=toutiao_android&req_id=20190617093910010023072197452E918&group_id=6683120112255369732

v-show 與 v-if 區別

第一題應該是最簡單的，提這個問題，也是想讓候選人不那么緊張，因為但凡用過 Vue.js，多少知道 v-show 和 v-if 的區別，否則就沒得聊了。不過這最簡單的一道題，有三個層次，我會逐一追問。首先，基本所有人都會說到：

v-show 只是 CSS 級別的 display: none; 和 display: block; 之間的切換，而 v-if 決定是否會選擇代碼塊的內容（或組件）。

回答這些，已經可以得到 50 分了，緊接着我會追問，什么時候用 v-show，什么時候用 v-if ？到這里一部分人會比較吞吐，可能是知道，但表達不出來。我比較傾向的回答是：

頻繁操作時，使用 v-show，一次性渲染完的，使用 v-if，只要意思對就好。

第二問可以得到 80 分了，最后一問很少有人能答上：**那使用 v-if 在性能優化上有什么經驗？**這是一個加分項，要對 Vue.js 的組件編譯有一定的理解。說一下期望的答案：

因為當 v-if="false" 時，內部組件是不會渲染的，所以在特定條件才渲染部分組件（或內容）時，可以先將條件設置為 false，需要時（或異步，比如 $nextTick）再設置為 true，這樣可以優先渲染重要的其它內容，合理利用，可以進行性能優化。

綁定 class 的數組用法

動態綁定 class 應該不陌生吧，這也是最基本的，但是這個問題卻有點繞，什么叫**綁定 class 的數組用法？**我們看一下，最常用的綁定 class 怎么寫：

 

綁定 class 的對象用法能滿足大部分業務需求，不過，在復雜的場景下，會用到數組，來看示例：

<template>
 <div :class="classes"></div>
</template>
<script>
 export default {
 computed: {
 classes () {
 return [
 `${prefixCls}`,
 `${prefixCls}-${this.type}`,
 {
 [`${prefixCls}-long`]: this.long,
 [`${prefixCls}-${this.shape}`]: !!this.shape,
 [`${prefixCls}-${this.size}`]: this.size !== 'default',
 [`${prefixCls}-loading`]: this.loading != null && this.loading,
 [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
 [`${prefixCls}-ghost`]: this.ghost
 }
 ];
 }
 }
 }
</script>

 

示例來自 iView 的 Button 組件，可以看到，數組里，可以是固定的值，還有動態值（對象）的混合。

計算屬性和 watch 的區別

回答該題前，一般都會思考一下。很多人會偏題，直接去答計算屬性和 watch 怎么用，這是不得分的，因為題目是問區別，並不是用法。

計算屬性是自動監聽依賴值的變化，從而動態返回內容，監聽是一個過程，在監聽的值變化時，可以觸發一個回調，並做一些事情。

所以區別來源於用法，只是需要動態值，那就用計算屬性；需要知道值的改變后執行業務邏輯，才用 watch，用反或混用雖然可行，但都是不正確的用法。

這個問題會延伸出幾個問題：

1. computed 是一個對象時，它有哪些選項？
2. computed 和 methods 有什么區別？
3. computed 是否能依賴其它組件的數據？
4. watch 是一個對象時，它有哪些選項？

問題 1，有 get 和 set 兩個選項。

問題 2，methods 是一個方法，它可以接受參數，而 computed 不能；computed 是可以緩存的，methods 不會；一般在 v-for 里，需要根據當前項動態綁定值時，只能用 methods 而不能用 computed，因為 computed 不能傳參。

問題 3，computed 可以依賴其它 computed，甚至是其它組件的 data。

問題 4，有以下常用的配置：

• handler 執行的函數
• deep 是否深度
• immediate 是否立即執行

事件修飾符

這個問題我會先寫一段代碼：

<custom-component>內容</custom-component>

然后問：怎樣給這個自定義組件 custom-component 綁定一個原生的 click 事件？

我一開始並不會問什么是事件修飾符，但是如果候選人說 <custom-component @click="xxx">，就已經錯了，說明它對這個沒有概念。這里的 @click 是自定義事件 click，並不是原生事件 click。綁定原生的 click 是這樣的：

<custom-component @click.native="xxx">內容</custom-component>

該問題會引申很多，比如常見的事件修飾符有哪些？如果你能說上 .exact，說明你是個很愛探索的人，會大大加分哦。

.exact 是 Vue.js 2.5.0 新加的，它允許你控制由精確的系統修飾符組合觸發的事件，比如：

<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>

你可能還需要了解常用的幾個事件修飾符：

• .stop
• .prevent
• .capture
• .self

而且，事件修飾符在連用時，是有先后順序的。

組件中 data 為什么是函數

為什么組件中的 data 必須是一個函數，然后 return 一個對象，而 new Vue 實例里，data 可以直接是一個對象？

因為組件是用來復用的，JS 里對象是引用關系，這樣作用域沒有隔離，而 new Vue 的實例，是不會被復用的，因此不存在引用對象的問題。

keep-alive 的理解

這是個概念題，主要考察候選人是否知道這個用法。簡單說，就是把一個組件的編譯緩存起來。

遞歸組件的要求

回答這道題，首先你得知道什么是遞歸組件。而不到 10% 的人知道遞歸組件。其實在實際業務中用的確實不多，在獨立組件中會經常使用，遞歸組件的要求是什么？主要有兩個：

1. 要給組件設置 name；
2. 要有一個明確的結束條件。

自定義組件的語法糖 v-model 是怎樣實現的

這里的 v-model，並不是給普通輸入框 <input /> 用的那種 v-model，而是在自定義組件上使用。既然是語法糖，就能夠還原，我們先還原一下：

 

 

這個組件中，只有一個 props，但是名字叫 value，內部還有一個 currentValue，當改變 currentValue 時，會觸發一個自定義事件 @input，並把 currentValue 的值返回。這就是一個 v-model 的語法糖，它要求 props 有一個叫 value 的項，同時觸發的自定義事件必須叫 input。這樣就可以在自定義組件上用 v-model 了：

<custom-component v-model="value"></custom-component>

如果你能說到 model 選項，絕對是加分的。

Vuex 中 mutations 和 actions 的區別

主要的區別是，actions 可以執行異步。actions 是調用 mutations，而 mutations 來修改 store。

Render 函數

這是比較難的一題了，因為很少有人會去了解 Vue.js 的 Render 函數，因為基本用不到。遇到這個問題，一般可以從這幾個方面來回答：

1. 什么是 Render 函數，它的使用場景是什么。
2. createElement 是什么？
3. Render 函數有哪些常用的參數？

說到 Render 函數，就要說到虛擬 DOM（Virtual DOM）,Virtual DOM 並不是真正意義上的 DOM，而是一個輕量級的 JavaScript 對象，在狀態發生變化時，Virtual DOM 會進行 Diff 運算，來更新只需要被替換的 DOM，而不是全部重繪。

它的使用場景，就是完全發揮 JavaScript 的編程能力，有時需要結合 JSX 來使用。

createElement 是 Render 函數的核心，它構成了 Vue Virtual DOM 的模板，它有 3 個參數：

 

常用的參數，主要是指上面第二個參數里的值了，這個比較多，得去看 Vue.js 的文檔。

怎樣理解單向數據流

這個概念出現在組件通信。父組件是通過 prop 把數據傳遞到子組件的，但是這個 prop 只能由父組件修改，子組件不能修改，否則會報錯。子組件想修改時，只能通過 $emit 派發一個自定義事件，父組件接收到后，由父組件修改。

一般來說，對於子組件想要更改父組件狀態的場景，可以有兩種方案：

1. 在子組件的 data 中拷貝一份 prop，data 是可以修改的，但 prop 不能：

 

2.如果是對 prop 值的轉換，可以使用計算屬性：

 

如果你能提到 v-model 實現數據的雙向綁定、.sync 用法，會大大加分的。

生命周期

Vue.js 生命周期主要有 8 個階段：

1.創建前 / 后（beforeCreate / created）：在 beforeCreate 階段，Vue 實例的掛載元素 el 和數據對象 data 都為 undefined，還未初始化。在 created 階段，Vue 實例的數據對象 data 有了，el 還沒有。

2.載入前 / 后（beforeMount / mounted）：在 beforeMount 階段，Vue 實例的 $el 和 data 都初始化了，但還是掛載之前為虛擬的 DOM 節點，data 尚未替換。在 mounted 階段，Vue 實例掛載完成，data 成功渲染。

3.更新前 / 后（beforeUpdate / updated）：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。這兩個不常用，且不推薦使用。

4.銷毀前 / 后（beforeDestroy / destroyed）：beforeDestroy 是在 Vue 實例銷毀前觸發，一般在這里要通過 removeEventListener 解除手動綁定的事件。實例銷毀后，觸發 destroyed。

組件間通信

這個問題看似簡單，卻比較大，回答時，可以拆分為幾種場景：

一、父子通信：

1. 父向子傳遞數據是通過 props，子向父是通過 events（emit）；
2. 通過父鏈子鏈也可以通信（parent / $children）；
3. ref也可以訪問組件實例；provide / inject API。

二、兄弟通信：

1. Bus
2. Vuex

三、跨級通信：

1. Bus；
2. Vuex；
3. provide / inject API。

除了常規的通信方法，最近幾篇文章提到的 dispatch / broadcast 和 findComponents 系列方法也可以說的，如果能說到這些，說明你對 Vue.js 組件已經有較深入的研究。

路由的跳轉方式

一般有兩種：

1. 通過 <router-link to="home">，router-link 標簽會渲染為 <a> 標簽，在 template 中的跳轉都是用這種；
2. 另一種是編程式導航，也就是通過 JS 跳轉，比如 router.push('/home')。

Vue.js 2.x 雙向綁定原理

這個問題幾乎是面試必問的，回答也是有深有淺。基本上要知道核心的 API 是通過 Object.defineProperty() 來劫持各個屬性的 setter / getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調，這也是為什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且無法通過 polyfill 實現）。

什么是 MVVM，與 MVC 有什么區別

MVVM 模式是由經典的軟件架構 MVC 衍生來的。當 View（視圖層）變化時，會自動更新到 ViewModel（視圖模型），反之亦然。View 和 ViewModel 之間通過雙向綁定（data-binding）建立聯系。與 MVC 不同的是，它沒有 Controller 層，而是演變為 ViewModel。

ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而 View 和 Model 之間的同步工作是由 Vue.js 完成的，我們不需要手動操作 DOM，只需要維護好數據狀態。

感悟

事物由簡單到復雜再到簡單，技術無止盡，接觸的越多，感覺自己知道的越少。所謂的心存敬畏吧，共勉！