VUE的面試題分享-好程式設計師

　　VUE 的面試題 分享- 好程式設計師， 現在前端面試中會有很多VUE 的面試題， Vue 框架部分小編整理了幾個頻率比較高的面試題，希望可以幫助到正在面試的你，沒準下次的面試裡就會出現這個題目哦， web 前端面試中關於 VUE 的面試題（含答案）

　　 1 對 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 都採用這種模式。

　　 2 如何理解 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 更新完成後就會呼叫。

　　 3 深入響應式原理之如何追蹤變化

　　 當你把一個普通的 JavaScript 物件傳給 Vue 例項的 data 選項， Vue 將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉 getter/setter 。

　　 Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什麼 Vue 不支援 IE8 以及更低版本瀏覽器的原因。這些 getter/setter 對使用者來說是不可見的，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這裡需要注意的問題是瀏覽器控制檯在列印資料物件時 getter/setter 的格式化並不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查介面。

　　 每個元件例項都有相應的 watcher 例項物件，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被呼叫時，會通知 watcher 重新計算，從而致使它關聯的元件得以更新。觀察者訂閱了可觀察物件，當可觀察物件釋出事件，則就直接排程觀察者的行為，所以這裡觀察者和可觀察物件其實就產生了一個依賴的關係。

　　 4 說下對 Virtual DOM 演算法的理解 ？

　　 包括幾個步驟：

　　 1 、用 JavaScript 物件結構表示 DOM 樹的結構，然後用這個樹構建一個真正的 DOM 樹，插到文件當中；

　　 2 、當狀態變更的時候，重新構造一棵新的物件樹，然後用新的樹和舊的樹進行比較，記錄兩棵樹差異；

　　 3 、把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上，檢視就更新了。 Virtual DOM 本質上就是在 JS 和 DOM 之間做了一個快取。可以類比 CPU 和硬碟，既然硬碟這麼慢，我們就在它們之間加個快取：既然 DOM 這麼慢，我們就在它們 JS 和 DOM 之間加個快取。 CPU （ JS ）只操作記憶體（ Virtual DOM ），最後的時候再把變更寫入硬碟（ DOM ）。