2019 前端面試題匯總(主要為 Vue)

（給前端大全加星標，提升前端技能）

作者：前端小醬

https://segmentfault.com/a/1190000018225708

畢業之後就在一直合肥小公司工作，沒有老司機、沒有技術氛圍，在技術的道路上我只能獨自摸索。老闆也只會畫餅充飢，前途一片迷茫看不到任何希望。於是乎，我果斷辭職，在新年開工之際來到杭州，這裡的網際網路公司應該是合肥的幾十倍吧。。。。

剛來3天，面試了幾家公司，有些規模比較小，有些是創業公司，也有些已經發展的不錯了；今天把最近的面試題目做個匯總，也給自己復個盤，由於我的技術棧主要為Vue，所以大部分題目都是Vue開發相關的。

1. 談談你對MVVM開發模式的理解

MVVM分為Model、View、ViewModel三者。

Model和View並無直接關聯，而是通過ViewModel來進行聯繫的，Model和ViewModel之間有著雙向數據綁定的聯繫。因此當Model中的數據改變時會觸發View層的刷新，View中由於用戶交互操作而改變的數據也會在Model中同步。

這種模式實現了Model和View的數據自動同步，因此開發者只需要專注對數據的維護操作即可，而不需要自己操作dom。

2. Vue 有哪些指令？

v-html、v-show、v-if、v-for等等。

3. v-if 和 v-show 有什麼區別？

v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；而v-if會控制這個 DOM 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理。

4. 簡述Vue的響應式原理

當一個Vue實例創建時，vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉為getter/setter並且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。每個組件實例都有相應的watcher程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之後當依賴項的setter被調用時，會通知watcher重新計算，從而致使它關聯的組件得以更新。

5. Vue中如何在組件內部實現一個雙向數據綁定？

假設有一個輸入框組件，用戶輸入時，同步父組件頁面中的數據。

具體思路：父組件通過props傳值給子組件，子組件通過 $emit 來通知父組件修改相應的props值，具體實現如下：

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'

   }

 }

})

可以看到，當輸入數據時，父子組件中的數據是同步改變的：

我們在父組件中做了兩件事，一是給子組件傳入props，二是監聽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中如何監控某個屬性值的變化？

比如現在需要監控data中， obj.a 的變化。Vue中監控對象屬性的變化你可以這樣：

watch: {

     obj: {

     handler (newValue, oldValue) {

       console.log('obj changed')

     },

     deep: true

   }

 }

deep屬性表示深層遍歷，但是這麼寫會監控obj的所有屬性變化，並不是我們想要的效果，所以做點修改：

watch: {

  'obj.a': {

     handler (newName, oldName) {

       console.log('obj.a changed')

     }

  }

 }

還有一種方法，可以通過computed 來實現，只需要：

computed: {

   a1 () {

     return this.obj.a

   }

}

利用計算屬性的特性來實現，當依賴改變時，便會重新計算一個新值。

7. Vue中給data中的對象屬性添加一個新的屬性時會發生什麼，如何解決？

示例：

<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會發現， obj.b 已經成功添加，但是視圖並未刷新：

原因在於在Vue實例創建時， obj.b 並未聲明，因此就沒有被Vue轉換為響應式的屬性，自然就不會觸發視圖的更新，這時就需要使用Vue的全局api—— $set()：

addObjB () {

     // this.obj.b = 'obj.b'

     this.$set(this.obj, 'b', 'obj.b')

     console.log(this.obj)

   }

$set() 方法相當於手動的去把 obj.b 處理成一個響應式的屬性，此時視圖也會跟著改變了：

8. delete和Vue.delete刪除數組的區別

delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。

Vue.delete 直接刪除了數組 改變了數組的鍵值。

   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.如何優化SPA應用的首屏加載速度慢的問題？10. 前端如何優化網站性能？1、減少 HTTP 請求數量

在瀏覽器與伺服器進行通信時，主要是通過 HTTP 進行通信。瀏覽器與伺服器需要經過三次握手，每次握手需要花費大量時間。而且不同瀏覽器對資源文件並發請求數量有限（不同瀏覽器允許並發數），一旦 HTTP 請求數量達到一定數量，資源請求就存在等待狀態，這是很致命的，因此減少 HTTP 的請求數量可以很大程度上對網站性能進行優化。

CSS Sprites

國內俗稱CSS精靈，這是將多張圖片合併成一張圖片達到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內容。這種方案同時還可以減少圖片總字節數。

合併 CSS 和 JS 文件

現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數量，可以通過這些工具再發布前將多個CSS或者多個JS合併成一個文件。

採用 lazyLoad

俗稱懶加載，可以控制網頁上的內容在一開始無需加載，不需要發請求，等到用戶操作真正需要的時候立即加載出內容。這樣就控制了網頁資源一次性請求數量。

2、控制資源文件加載優先級

瀏覽器在加載HTML內容時，是將HTML內容從上至下依次解析，解析到link或者script標籤就會加載href或者src對應連結內容，為了第一時間展示頁面給用戶，就需要將CSS提前加載，不要受 JS 加載影響。

一般情況下都是CSS在頭部，JS在底部。

3、利用瀏覽器緩存

瀏覽器緩存是將網絡資源存儲在本地，等待下次請求該資源時，如果資源已經存在就不需要到伺服器重新請求該資源，直接在本地讀取該資源。

4、減少重排（Reflow）

基本原理：重排是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如果Reflow的過於頻繁，CPU使用率就會急劇上升。

減少Reflow，如果需要在DOM操作時添加樣式，儘量使用 增加class屬性，而不是通過style操作樣式。

5、減少 DOM 操作6、圖標使用 IconFont 替換11. 網頁從輸入網址到渲染完成經歷了哪些過程？

大致可以分為如下7步：

輸入網址；

發送到DNS伺服器，並獲取域名對應的web伺服器對應的ip地址；

與web伺服器建立TCP連接；

瀏覽器向web伺服器發送http請求；

web伺服器響應請求，並返回指定url的數據（或錯誤信息，或重定向的新的url地址）；

瀏覽器下載web伺服器返回的數據及解析html源文件；

生成DOM樹，解析css和js，渲染頁面，直至顯示完成；

12. jQuery獲取的dom對象和原生的dom對象有何區別？

js原生獲取的dom是一個對象，jQuery對象就是一個數組對象，其實就是選擇出來的元素的數組集合，所以說他們兩者是不同的對象類型不等價。

原生DOM對象轉jQuery對象：

var box = document.getElementById('box');

var $box = $(box);

jQuery對象轉原生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();

目前來看公司面試的問題還是比較基礎的，但是對於某些只追求會用並不研究其原理的同學來說可能就沒那麼容易了。所以大家不僅要追求學習的廣度，更要追求深度。

OK，希望自己能早日拿到心儀的offer.

參考

《淺談網站性能之前端性能優化》

覺得本文對你有幫助？請分享給更多人

關注「前端大全」加星標，提升前端技能

喜歡就點一下「好看」唄~