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，用反或混用雖然可行，但都是不正確的用法。

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

computed 是一個對象時，它有哪些選項？

computed 和 methods 有什么區別？

computed 是否能依賴其它組件的數據？

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% 的人知道遞歸組件。其實在實際業務中用的確實不多，在獨立組件中會經常使用，遞歸組件的要求是什么？主要有兩個：

要給組件設置 name；

要有一個明確的結束條件。

自定義組件的語法糖 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 函數，因為基本用不到。遇到這個問題，一般可以從這幾個方面來回答：

什么是 Render 函數，它的使用場景是什么。

createElement 是什么？

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 派發一個自定義事件，父組件接收到后，由父組件修改。

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

在子組件的 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。

組件間通信

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

一、父子通信：

父向子傳遞數據是通過 props，子向父是通過 events（emit）；

通過父鏈子鏈也可以通信（parent / $children）；

ref也可以訪問組件實例；provide / inject API。

二、兄弟通信：

Bus

Vuex

三、跨級通信：

Bus；

Vuex；

provide / inject API。

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

路由的跳轉方式

一般有兩種：

通過 <router-link to="home">，router-link 標簽會渲染為 <a> 標簽，在 template 中的跳轉都是用這種；

另一種是編程式導航，也就是通過 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，只需要維護好數據狀態。

感悟

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

總結

以上是生活随笔為你收集整理的js 数组修改watch_前端面试：专注Vue.js常见的问题答疑，掌握了基本上Vue就过关了...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。