8 道高頻出現的 Vue 面試題及答案

前言

本文講解 8 道高頻出現的 Vue 面試題及答案。

複習前端面試的知識，是爲了鞏固前端的基礎知識，最重要的還是平時的積累！

注意：文章的題與題之間用下劃線分隔開，答案僅供參考。

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數據結構與算法 + Git 。

Vue

對 MVC、MVP 、MVVM 的理解

MVC 模式的意思是，軟件可以分成三個部分。

• 視圖（View）：用戶界面。
• 控制器（Controller）：業務邏輯。
• 模型（Model）：數據保存。

各部分之間的通信方式如下。

• View 傳送指令到 Controller
• Controller 完成業務邏輯後，要求 Model 改變狀態
• Model 將新的數據發送到 View，用戶得到反饋
• 所有通信都是單向的（逆時針）。

MVP 模式將 Controller 改名爲 Presenter，同時改變了通信方向。

• 各部分之間的通信，都是雙向的（順時針）。
• View 與 Model 不發生聯繫，都通過 Presenter 傳遞。
• View 非常薄，不部署任何業務邏輯，稱爲 "被動視圖"（Passive View），即沒有任何主動性，而 Presenter非常厚，所有邏輯都部署在那裏。

MVVM 模式將 Presenter 改名爲 ViewModel，基本上與 MVP 模式完全一致。

唯一的區別是，它採用雙向綁定（data-binding）：View 的變動，自動反映在 ViewModel，反之亦然。Angular 和 Ember 都採用這種模式。

---

如何理解 Vue 是異步執行 DOM 更新的 ？

• Vue 是異步執行 DOM 更新。
• 只要觀察到數據變化，Vue 將開啓一個隊列，並緩衝在同一事件循環中發生的所有數據改變。
• 如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩衝時去除重複數據對於避免不必要的計算和 DOM 操作上非常重要。
• 然後，在下一個的事件循環 tick 中，Vue 刷新隊列並執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel，如果執行環境不支持，會採用 setTimeout(fn, 0) 代替。

例如，當你設置 vm.someData = 'new value' ，該組件不會立即重新渲染。

• 當刷新隊列時，組件會在事件循環隊列清空時的下一個 tick 更新。
• 多數情況我們不需要關心這個過程，但是如果你想在 DOM 狀態更新後做點什麼，這就可能會有些棘手。
• 雖然 Vue.js 通常鼓勵開發人員沿着 “數據驅動” 的方式思考，避免直接接觸 DOM，但是有時我們確實要這麼做。爲了在數據變化之後等待 Vue 完成更新 DOM ，可以在數據變化之後立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成後就會調用。

---

深入響應式原理

如何追蹤變化

• 當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉 getter/setter。
• Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是爲什麼 Vue 不支持 IE8 以及更低版本瀏覽器的原因。
• 這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這裏需要注意的問題是瀏覽器控制檯在打印數據對象時 getter/setter 的格式化並不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。
• 每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄爲依賴，之後當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。
• 觀察者訂閱了可觀察對象，當可觀察對象發佈事件，則就直接調度觀察者的行爲，所以這裏觀察者和可觀察對象其實就產生了一個依賴的關係。

---

說下對 Virtual DOM 算法的理解 ？

包括幾個步驟：

• 1、用 JavaScript 對象結構表示 DOM 樹的結構，然後用這個樹構建一個真正的 DOM 樹，插到文檔當中；
• 2、當狀態變更的時候，重新構造一棵新的對象樹，然後用新的樹和舊的樹進行比較，記錄兩棵樹差異；
• 3、把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了。

Virtual DOM 本質上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU 和硬盤，既然硬盤這麼慢，我們就在它們之間加個緩存：既然 DOM 這麼慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內存（Virtual DOM），最後的時候再把變更寫入硬盤（DOM）。

---

比較兩棵虛擬 DOM 樹的差異

比較兩棵 DOM 樹的差異是 Virtual DOM 算法最核心的部分，這也是所謂的 Virtual DOM 的 diff
算法。
兩個樹的完全的 diff 算法是一個時間複雜度爲 O(n^3) 的問題。但是在前端當中，你很少會跨越層級地移動 DOM 元素。

所以 Virtual DOM 只會對同一個層級的元素進行對比：

上面的 div 只會和同一層級的 div 對比，第二層級的只會跟第二層級對比。這樣算法複雜度就可以達到 O(n)。

深度優先遍歷，記錄差異

在實際的代碼中，會對新舊兩棵樹進行一個深度優先的遍歷，這樣每個節點都會有一個唯一的標記：

在深度優先遍歷的時候，每遍歷到一個節點就把該節點和新的的樹進行對比。如果有差異的話就記錄到一個對象裏面。

Virtual DOM 算法主要是實現上面步驟的三個函數：element，diff，patch。然後就可以實際的進行使用：

// 1. 構建虛擬 DOM
var tree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: blue'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li')])
])
// 2. 通過虛擬 DOM 構建真正的 DOM
var root = tree.render()
document.body.appendChild(root)
// 3. 生成新的虛擬 DOM
var newTree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: red'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li'), el('li')])
])
// 4. 比較兩棵虛擬 DOM 樹的不同
var patches = diff(tree, newTree)
// 5. 在真正的 DOM 元素上應用變更
patch(root, patches)

當然這是非常粗糙的實踐，實際中還需要處理事件監聽等；生成虛擬 DOM 的時候也可以加入 JSX 語法。這些事情都做了的話，就可以構造一個簡單的 ReactJS 了。

---

非父子組件如何通信 ？

Vue 官網介紹了非父子組件通信方法：

在 bus.js 裏面 寫入下面信息

import Vue from 'vue'
export default new Vue();

在需要通信的組件都引入 Bus.js    

<template>
  <div id="emit">
    <button @click="bus">按鈕</button>
  </div> 
</template > 
import Bus from './bus.js'
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    bus() {
      Bus.$emit('msg', '我要傳給兄弟組件們，你收到沒有')
    }
  }
}

在鉤子函數中監聽 msg 事件：

<template>
    <div id="on">
      <p>{{message}}</p>
    </div>
</template>
import Bus from './bus.js'
export default {
    data() {
      return {
        message:  ''
      }
    },
    mounted() {　　　
       let self = this
       Bus.$on('msg', (e) => {
         self.message = e
         console.log(`傳來的數據是：${e}`)
       })
    }
 }

最後 p 會顯示來自 $emit 傳來的信息。

---

什麼情況下我應該使用 Vuex ？

• 雖然 Vuex 可以幫助我們管理共享狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
• 如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此，如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。
• 但是，如果您需要構建一箇中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲自然而然的選擇。

---

Vue 過程圖解

Vue 生命週期過程圖解

Vue 響應式原理

Vue 過程圖解

Vuex

Vue 經典面試相關文章

• 1. 對 Vue、Vue-Router、Vuex 源碼與架構的理解
• 2. Vue 生命週期
• 3. 詳解 Vue 生命週期
• 4. Vue 組件間通信六種方式（完整版）
• 5. Vue 學習筆記-實現一個分頁組件

最後

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數據結構與算法 + Git 。

如果覺得本文還不錯，記得給個 star ， 你的 star 是我持續更新的動力！。