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 算法的理解 ？

包括幾個步驟：

• 一、用 JavaScript 對象結構表示 DOM 樹的結構，而後用這個樹構建一個真正的 DOM 樹，插到文檔當中；
• 二、當狀態變動的時候，從新構造一棵新的對象樹，而後用新的樹和舊的樹進行比較，記錄兩棵樹差別；
• 三、把 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 是我持續更新的動力！。