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