web前端面試中關(guān)于VUE的面試題（含答案）

發(fā)布時間：2019-11-08 15:45:35 作者：qf2019

我要評論

這篇文章主要介紹了web前端面試中關(guān)于VUE的面試題（含答案）,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

現(xiàn)在前端面試中會有很多VUE的面試題，Vue框架部分小編整理了幾個頻率比較高的面試題，希望可以幫助到正在面試的你，沒準下次的面試里就會出現(xiàn)這個題目哦

1對 MVC、MVP 、MVVM 的理解

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

視圖（View）：用戶界面。

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

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

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

MVP 模式將 Controller 改名為 Presenter，同時改變了通信方向。各部分之間的通信，都是雙向的（順時針）。View 與 Model 不發(fā)生聯(lián)系，都通過 Presenter 傳遞。View 非常薄，不部署任何業(yè)務(wù)邏輯，稱為 “被動視圖”（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深入響應(yīng)式原理之如何追蹤變化

當你把一個普通的 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 來獲取更加友好的檢查接口。

每個組件實例都有相應(yīng)的 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 所記錄的差異應(yīng)用到步驟 1 所構(gòu)建的真正的 DOM 樹上，視圖就更新了。Virtual DOM 本質(zhì)上就是在 JS 和 DOM 之間做了一個緩存?？梢灶惐?CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內(nèi)存（Virtual DOM），最后的時候再把變更寫入硬盤（DOM）。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。