VUE 的面試題 分享- 好程序員， 現(xiàn)在前端面試中會有很多VUE 的面試題， Vue 框架部分小編整理了幾個頻率比較高的面試題，希望可以幫助到正在面試的你，沒準下次的面試里就會出現(xiàn)這個題目哦， web 前端面試中關(guān)于 VUE 的面試題（含答案）

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供南和網(wǎng)站建設(shè)、南和做網(wǎng)站、南和網(wǎng)站設(shè)計、南和網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、南和企業(yè)網(wǎng)站模板建站服務，十余年南和做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務。

　 1 對 MVC 、 MVP 、 MVVM 的理解

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

　 視圖（View ）：用戶界面。

　 控制器（Controller ）：業(yè)務邏輯。

　 模型（Model ）：數(shù)據(jù)保存。

　 各部分之間的通信方式如下。View 傳送指令到 Controller ， Controller 完成業(yè)務邏輯后，要求 Model 改變狀態(tài)， Model 將新的數(shù)據(jù)發(fā)送到 View ，用戶得到反饋，所有通信都是單向的（逆時針）。

　 MVP 模式將 Controller 改名為 Presenter ，同時改變了通信方向。各部分之間的通信，都是雙向的（順時針）。 View 與 Model 不發(fā)生聯(lián)系，都通過 Presenter 傳遞。 View 非常薄，不部署任何業(yè)務邏輯，稱為 " 被動視圖 " （ Passive View ），即沒有任何主動性，而 Presenter 非常厚，所有邏輯都部署在那里。 MVVM 模式將 Presenter 改名為 ViewModel ，基本上與 MVP 模式完全一致。唯一的區(qū)別是，它采用雙向綁定（ data-binding ）： View 的變動，自動反映在 ViewModel ，反之亦然。 Angular 和 Ember 都采用這種模式。

　 2 如何理解 Vue 是異步執(zhí)行 DOM 更新的 ？

　 Vue 是異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化， Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環(huán) tick 中， Vue 刷新隊列并執(zhí)行實際 ( 已去重的 ) 工作。 Vue 在內(nèi)部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel ，如果執(zhí)行環(huán)境不支持，會采用 setTimeout(fn, 0) 代替。例如，當你設(shè)置 vm.someData = 'new value' ，該組件不會立即重新渲染。

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

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

　 當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項， Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn) getter/setter 。

　 Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。這些 getter/setter 對用戶來說是不可見的，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數(shù)據(jù)對象時 getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。

　 每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調(diào)用時，會通知 watcher 重新計算，從而致使它關(guān)聯(lián)的組件得以更新。觀察者訂閱了可觀察對象，當可觀察對象發(fā)布事件，則就直接調(diào)度觀察者的行為，所以這里觀察者和可觀察對象其實就產(chǎn)生了一個依賴的關(guān)系。

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

　 包括幾個步驟：

　 1 、用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu)，然后用這個樹構(gòu)建一個真正的 DOM 樹，插到文檔當中；

　 2 、當狀態(tài)變更的時候，重新構(gòu)造一棵新的對象樹，然后用新的樹和舊的樹進行比較，記錄兩棵樹差異；

　 3 、把 2 所記錄的差異應用到步驟 1 所構(gòu)建的真正的 DOM 樹上，視圖就更新了。 Virtual DOM 本質(zhì)上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。 CPU （ JS ）只操作內(nèi)存（ Virtual DOM ），最后的時候再把變更寫入硬盤（ DOM ）。