vue 同步加载_2019 前端面试题汇总（主要为 Vue）
畢業(yè)之后就在一直合肥小公司工作，沒(méi)有老司機(jī)、沒(méi)有技術(shù)氛圍，在技術(shù)的道路上我只能獨(dú)自摸索。老板也只會(huì)畫(huà)餅充饑，前途一片迷茫看不到任何希望。于是乎，我果斷辭職，在新年開(kāi)工之際來(lái)到杭州，這里的互聯(lián)網(wǎng)公司應(yīng)該是合肥的幾十倍吧。。。。
剛來(lái)3天，面試了幾家公司，有些規(guī)模比較小，有些是創(chuàng)業(yè)公司，也有些已經(jīng)發(fā)展的不錯(cuò)了；今天把最近的面試題目做個(gè)匯總，也給自己復(fù)個(gè)盤(pán)，由于我的技術(shù)棧主要為Vue，所以大部分題目都是Vue開(kāi)發(fā)相關(guān)的。
1. 談?wù)勀銓?duì)MVVM開(kāi)發(fā)模式的理解
MVVM分為Model、View、ViewModel三者。
- Model：代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；
- View：代表UI視圖，負(fù)責(zé)數(shù)據(jù)的展示；
- ViewModel：負(fù)責(zé)監(jiān)聽(tīng)Model中數(shù)據(jù)的改變并且控制視圖的更新，處理用戶(hù)交互操作；
Model和View并無(wú)直接關(guān)聯(lián)，而是通過(guò)ViewModel來(lái)進(jìn)行聯(lián)系的，Model和ViewModel之間有著雙向數(shù)據(jù)綁定的聯(lián)系。因此當(dāng)Model中的數(shù)據(jù)改變時(shí)會(huì)觸發(fā)View層的刷新，View中由于用戶(hù)交互操作而改變的數(shù)據(jù)也會(huì)在Model中同步。
這種模式實(shí)現(xiàn)了Model和View的數(shù)據(jù)自動(dòng)同步，因此開(kāi)發(fā)者只需要專(zhuān)注對(duì)數(shù)據(jù)的維護(hù)操作即可，而不需要自己操作dom。
2. Vue 有哪些指令？
v-html、v-show、v-if、v-for等等。
3. v-if 和 v-show 有什么區(qū)別？
v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來(lái)回切換；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)，使用v-show會(huì)更加節(jié)省性能上的開(kāi)銷(xiāo)；當(dāng)只需要一次顯示或隱藏時(shí)，使用v-if更加合理。
4. 簡(jiǎn)述Vue的響應(yīng)式原理
當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)，vue會(huì)遍歷data選項(xiàng)的屬性，用 Object.defineProperty將它們轉(zhuǎn)為getter/setter并且在內(nèi)部追蹤相關(guān)依賴(lài)，在屬性被訪問(wèn)和修改時(shí)通知變化。 每個(gè)組件實(shí)例都有相應(yīng)的watcher程序?qū)嵗?#xff0c;它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴(lài)，之后當(dāng)依賴(lài)項(xiàng)的setter被調(diào)用時(shí)，會(huì)通知watcher重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。
5. Vue中如何在組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定？
假設(shè)有一個(gè)輸入框組件，用戶(hù)輸入時(shí)，同步父組件頁(yè)面中的數(shù)據(jù)。
具體思路：父組件通過(guò)props傳值給子組件，子組件通過(guò) $emit 來(lái)通知父組件修改相應(yīng)的props值，具體實(shí)現(xiàn)如下：
import Vue from 'vue'const component = { ?props: ['value'], ?template: ` ? ?可以看到，當(dāng)輸入數(shù)據(jù)時(shí)，父子組件中的數(shù)據(jù)是同步改變的：
我們?cè)诟附M件中做了兩件事，一是給子組件傳入props，二是監(jiān)聽(tīng)input事件并同步自己的value屬性。那么這兩步操作能否再精簡(jiǎn)一下呢？答案是可以的，你只需要修改父組件：
template: ` ? ?v-model 實(shí)際上會(huì)幫我們完成上面的兩步操作。
6. Vue中如何監(jiān)控某個(gè)屬性值的變化？
比如現(xiàn)在需要監(jiān)控data中， obj.a 的變化。Vue中監(jiān)控對(duì)象屬性的變化你可以這樣：
watch: { ? ? ?obj: { ? ? ?handler (newValue, oldValue) { ? ? ? ?console.log('obj changed') ? ? ?}, ? ? ?deep: true ? ?} ?}deep屬性表示深層遍歷，但是這么寫(xiě)會(huì)監(jiān)控obj的所有屬性變化，并不是我們想要的效果，所以做點(diǎn)修改：
watch: { ? 'obj.a': { ? ? ?handler (newName, oldName) { ? ? ? ?console.log('obj.a changed') ? ? ?} ? } ?}還有一種方法，可以通過(guò)computed 來(lái)實(shí)現(xiàn)，只需要：
computed: { ? ?a1 () { ? ? ?return this.obj.a ? ?}}利用計(jì)算屬性的特性來(lái)實(shí)現(xiàn)，當(dāng)依賴(lài)改變時(shí)，便會(huì)重新計(jì)算一個(gè)新值。
7. Vue中給data中的對(duì)象屬性添加一個(gè)新的屬性時(shí)會(huì)發(fā)生什么，如何解決？
示例：
? ? ? ? ? ? ? ? ? ?{{value}} ? ? ? ? ? ? ?添加obj.b ?點(diǎn)擊button會(huì)發(fā)現(xiàn)， obj.b 已經(jīng)成功添加，但是視圖并未刷新：
原因在于在Vue實(shí)例創(chuàng)建時(shí)， obj.b 并未聲明，因此就沒(méi)有被Vue轉(zhuǎn)換為響應(yīng)式的屬性，自然就不會(huì)觸發(fā)視圖的更新，這時(shí)就需要使用Vue的全局api—— $set()：
addObjB () { ? ? ?// this.obj.b = 'obj.b' ? ? ?this.$set(this.obj, 'b', 'obj.b') ? ? ?console.log(this.obj) ? ?}$set() 方法相當(dāng)于手動(dòng)的去把 obj.b 處理成一個(gè)響應(yīng)式的屬性，此時(shí)視圖也會(huì)跟著改變了：
8. delete和Vue.delete刪除數(shù)組的區(qū)別
delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。
? ?var a=[1,2,3,4] ? ?var b=[1,2,3,4] ? ?delete a[1] ? ?console.log(a) ? ?this.$delete(b,1) ? ?console.log(b)9.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問(wèn)題？
- 將公用的JS庫(kù)通過(guò)script標(biāo)簽外部引入，減小 app.bundel 的大小，讓瀏覽器并行下載資源文件，提高下載速度；
- 在配置 路由時(shí)，頁(yè)面和組件使用懶加載的方式引入，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用某個(gè)組件時(shí)再加載對(duì)應(yīng)的js文件；
- 加一個(gè)首屏loading圖，提升用戶(hù)體驗(yàn)；
10. 前端如何優(yōu)化網(wǎng)站性能？
1)、減少 HTTP 請(qǐng)求數(shù)量
在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過(guò) HTTP 進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過(guò)三次握手，每次握手需要花費(fèi)大量時(shí)間。而且不同瀏覽器對(duì)資源文件并發(fā)請(qǐng)求數(shù)量有限(不同瀏覽器允許并發(fā)數(shù))，一旦 HTTP 請(qǐng)求數(shù)量達(dá)到一定數(shù)量，資源請(qǐng)求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請(qǐng)求數(shù)量可以很大程度上對(duì)網(wǎng)站性能進(jìn)行優(yōu)化。
CSS Sprites
國(guó)內(nèi)俗稱(chēng)CSS精靈，這是將多張圖片合并成一張圖片達(dá)到減少HTTP請(qǐng)求的一種解決方案，可以通過(guò)CSS的background屬性來(lái)訪問(wèn)圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)。
合并 CSS 和 JS 文件
現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請(qǐng)求數(shù)量，可以通過(guò)這些工具再發(fā)布前將多個(gè)CSS或者多個(gè)JS合并成一個(gè)文件。
采用 lazyLoad
俗稱(chēng)懶加載，可以控制網(wǎng)頁(yè)上的內(nèi)容在一開(kāi)始無(wú)需加載，不需要發(fā)請(qǐng)求，等到用戶(hù)操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁(yè)資源一次性請(qǐng)求數(shù)量。
2)、控制資源文件加載優(yōu)先級(jí)
瀏覽器在加載HTML內(nèi)容時(shí)，是將HTML內(nèi)容從上至下依次解析，解析到link或者script標(biāo)簽就會(huì)加載href或者src對(duì)應(yīng)鏈接內(nèi)容，為了第一時(shí)間展示頁(yè)面給用戶(hù)，就需要將CSS提前加載，不要受 JS 加載影響。
一般情況下都是CSS在頭部，JS在底部。
3)、利用瀏覽器緩存
瀏覽器緩存是將網(wǎng)絡(luò)資源存儲(chǔ)在本地，等待下次請(qǐng)求該資源時(shí)，如果資源已經(jīng)存在就不需要到服務(wù)器重新請(qǐng)求該資源，直接在本地讀取該資源。
4)、減少重排(Reflow)
基本原理：重排是DOM的變化影響到了元素的幾何屬性(寬和高)，瀏覽器會(huì)重新計(jì)算元素的幾何屬性，會(huì)使渲染樹(shù)中受到影響的部分失效，瀏覽器會(huì)驗(yàn)證 DOM 樹(shù)上的所有其它結(jié)點(diǎn)的visibility屬性，這也是Reflow低效的原因。如果Reflow的過(guò)于頻繁，CPU使用率就會(huì)急劇上升。
減少Reflow，如果需要在DOM操作時(shí)添加樣式，盡量使用 增加class屬性，而不是通過(guò)style操作樣式。
5)、減少 DOM 操作
6)、圖標(biāo)使用 IconFont 替換
11. 網(wǎng)頁(yè)從輸入網(wǎng)址到渲染完成經(jīng)歷了哪些過(guò)程？
大致可以分為如下7步：
12. jQuery獲取的dom對(duì)象和原生的dom對(duì)象有何區(qū)別？
js原生獲取的dom是一個(gè)對(duì)象，jQuery對(duì)象就是一個(gè)數(shù)組對(duì)象，其實(shí)就是選擇出來(lái)的元素的數(shù)組集合，所以說(shuō)他們兩者是不同的對(duì)象類(lèi)型不等價(jià)。
原生DOM對(duì)象轉(zhuǎn)jQuery對(duì)象：
var box = document.getElementById('box');var $box = $(box);jQuery對(duì)象轉(zhuǎn)原生DOM對(duì)象：
var $box = $('#box');var box = $box[0];13. jQuery如何擴(kuò)展自定義方法
(jQuery.fn.myMethod=function () { ? ? ? alert('myMethod');})// 或者：(function ($) { ? ? ? ?$.fn.extend({ ? ? ? ? ? ? myMethod : function () { ? ? ? ? ? ? ? ? ?alert('myMethod'); ? ? ? ? ? ? } ? ? ? ?})})(jQuery)使用：
$("#div").myMethod();目前來(lái)看公司面試的問(wèn)題還是比較基礎(chǔ)的，但是對(duì)于某些只追求會(huì)用并不研究其原理的同學(xué)來(lái)說(shuō)可能就沒(méi)那么容易了。所以大家不僅要追求學(xué)習(xí)的廣度，更要追求深度。
OK，希望自己能早日拿到心儀的offer.
總結(jié)
以上是生活随笔為你收集整理的vue 同步加载_2019 前端面试题汇总（主要为 Vue）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java从基础到入门_Java从入门到入
- 下一篇： Vue第三部分(1)：Vue脚手架构建过