2020-08-05
web前端培訓(xùn) web前端教程 Vue
VUE的面試題分享-好程序員,現(xiàn)在前端面試中會(huì)有很多VUE的面試題,Vue框架部分小編整理了幾個(gè)頻率比較高的面試題,希望可以幫助到正在面試的你,沒準(zhǔn)下次的面試?yán)锞蜁?huì)出現(xiàn)這個(gè)題目哦,web前端面試中關(guān)于VUE的面試題(含答案)
1、對 MVC、MVP 、MVVM 的理解
MVC 模式的意思是,軟件可以分成三個(gè)部分。
視圖(View):用戶界面。
控制器(Controller):業(yè)務(wù)邏輯。
模型(Model):數(shù)據(jù)保存。
各部分之間的通信方式如下。View 傳送指令到 Controller,Controller 完成業(yè)務(wù)邏輯后,要求 Model 改變狀態(tài),Model 將新的數(shù)據(jù)發(fā)送到 View,用戶得到反饋,所有通信都是單向的(逆時(shí)針)。
MVP 模式將 Controller 改名為 Presenter,同時(shí)改變了通信方向。各部分之間的通信,都是雙向的(順時(shí)針)。View 與 Model 不發(fā)生聯(lián)系,都通過 Presenter 傳遞。View 非常薄,不部署任何業(yè)務(wù)邏輯,稱為 "被動(dòng)視圖"(Passive View),即沒有任何主動(dòng)性,而 Presenter非常厚,所有邏輯都部署在那里。MVVM 模式將 Presenter 改名為 ViewModel,基本上與 MVP 模式完全一致。唯一的區(qū)別是,它采用雙向綁定(data-binding):View 的變動(dòng),自動(dòng)反映在 ViewModel,反之亦然。Angular 和 Ember 都采用這種模式。
2、如何理解 Vue 是異步執(zhí)行 DOM 更新的 ?
Vue 是異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化,Vue 將開啟一個(gè)隊(duì)列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā),只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對于避免不必要的計(jì)算和 DOM 操作上非常重要。然后,在下一個(gè)的事件循環(huán) tick 中,Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部嘗試對異步隊(duì)列使用原生的 Promise.then 和 MessageChannel,如果執(zhí)行環(huán)境不支持,會(huì)采用 setTimeout(fn, 0) 代替。例如,當(dāng)你設(shè)置 vm.someData = 'new value' ,該組件不會(huì)立即重新渲染。
當(dāng)刷新隊(duì)列時(shí),組件會(huì)在事件循環(huán)隊(duì)列清空時(shí)的下一個(gè) tick 更新。多數(shù)情況我們不需要關(guān)心這個(gè)過程,但是如果你想在 DOM 狀態(tài)更新后做點(diǎn)什么,這就可能會(huì)有些棘手。雖然 Vue.js 通常鼓勵(lì)開發(fā)人員沿著 “數(shù)據(jù)驅(qū)動(dòng)” 的方式思考,避免直接接觸 DOM,但是有時(shí)我們確實(shí)要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ,可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。
3、深入響應(yīng)式原理之如何追蹤變化
當(dāng)你把一個(gè)普通的 JavaScript 對象傳給 Vue 實(shí)例的 data 選項(xiàng),Vue 將遍歷此對象所有的屬性,并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn) getter/setter。
Object.defineProperty 是 ES5 中一個(gè)無法 shim 的特性,這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。這些 getter/setter 對用戶來說是不可見的,但是在內(nèi)部它們讓 Vue 追蹤依賴,在屬性被訪問和修改時(shí)通知變化。這里需要注意的問題是瀏覽器控制臺(tái)在打印數(shù)據(jù)對象時(shí) getter/setter 的格式化并不同,所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。
每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對象,它會(huì)在組件渲染的過程中把屬性記錄為依賴,之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí),會(huì)通知 watcher 重新計(jì)算,從而致使它關(guān)聯(lián)的組件得以更新。觀察者訂閱了可觀察對象,當(dāng)可觀察對象發(fā)布事件,則就直接調(diào)度觀察者的行為,所以這里觀察者和可觀察對象其實(shí)就產(chǎn)生了一個(gè)依賴的關(guān)系。
4、說下對 Virtual DOM 算法的理解 ?
包括幾個(gè)步驟:
1、用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu),然后用這個(gè)樹構(gòu)建一個(gè)真正的 DOM 樹,插到文檔當(dāng)中;
2、當(dāng)狀態(tài)變更的時(shí)候,重新構(gòu)造一棵新的對象樹,然后用新的樹和舊的樹進(jìn)行比較,記錄兩棵樹差異;
3、把 2 所記錄的差異應(yīng)用到步驟 1 所構(gòu)建的真正的 DOM 樹上,視圖就更新了。Virtual DOM 本質(zhì)上就是在 JS 和 DOM 之間做了一個(gè)緩存。可以類比 CPU 和硬盤,既然硬盤這么慢,我們就在它們之間加個(gè)緩存:既然 DOM 這么慢,我們就在它們 JS 和 DOM 之間加個(gè)緩存。CPU(JS)只操作內(nèi)存(Virtual DOM),最后的時(shí)候再把變更寫入硬盤(DOM)。
開班時(shí)間:2021-04-12(深圳)
開班盛況開班時(shí)間:2021-05-17(北京)
開班盛況開班時(shí)間:2021-03-22(杭州)
開班盛況開班時(shí)間:2021-04-26(北京)
開班盛況開班時(shí)間:2021-05-10(北京)
開班盛況開班時(shí)間:2021-02-22(北京)
開班盛況開班時(shí)間:2021-07-12(北京)
預(yù)約報(bào)名開班時(shí)間:2020-09-21(上海)
開班盛況開班時(shí)間:2021-07-12(北京)
預(yù)約報(bào)名開班時(shí)間:2019-07-22(北京)
開班盛況Copyright 2011-2023 北京千鋒互聯(lián)科技有限公司 .All Right 京ICP備12003911號-5 京公網(wǎng)安備 11010802035720號