本篇內(nèi)容主要講解“前端中Vue面試題有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“前端中Vue面試題有哪些”吧!

公司主營業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出弓長嶺免費做網(wǎng)站回饋大家。

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 來進(jìn)行聯(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ù)的維護(hù)操作即可，而不需要自己操作 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ū)嵗鼤诮M件渲染的過程中把屬性記錄為依賴，之后當(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: `      
              
    `,    data () {      return {      }    },    methods: {      handleInput (e) {        this.$emit('input', e.target.value)      }    } }  new Vue({    components: {      CompOne: component    },    el: '#root',    template: `      
              
    `,    data () {      return {        value: '123'      }    }  })

可以看到，當(dāng)輸入數(shù)據(jù)時，父子組件中的數(shù)據(jù)是同步改變的：

我們在父組件中做了兩件事，一是給子組件傳入props，二是監(jiān)聽input事件并同步自己的value屬性。那么這兩步操作能否再精簡一下呢？答案是可以的，你只需要修改父組件：

template: `      
                      
    `

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ā)生什么，如何解決？

示例：

點擊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的大小，讓瀏覽器并行下載資源文件，提高下載速度；

•  在配置 路由時，頁面和組件使用懶加載的方式引入，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用某個組件時再加載對應(yīng)的js文件；

•  加一個首屏 loading 圖，提升用戶體驗；

10. 前端如何優(yōu)化網(wǎng)站性能？

  1. 減少 HTTP 請求數(shù)量

在瀏覽器與服務(wù)器進(jìn)行通信時，主要是通過 HTTP 進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過三次握手，每次握手需要花費大量時間。而且不同瀏覽器對資源文件并發(fā)請求數(shù)量有限（不同瀏覽器允許并發(fā)數(shù)），一旦 HTTP 請求數(shù)量達(dá)到一定數(shù)量，資源請求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請求數(shù)量可以很大程度上對網(wǎng)站性能進(jìn)行優(yōu)化。

•  CSS Sprites：國內(nèi)俗稱 CSS 精靈，這是將多張圖片合并成一張圖片達(dá)到減少 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 操作樣式。

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  減少 DOM 操作

3.  圖標(biāo)使用 IconFont 替換

11. 網(wǎng)頁從輸入網(wǎng)址到渲染完成經(jīng)歷了哪些過程？

大致可以分為如下7步：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  輸入網(wǎng)址；

3.  發(fā)送到DNS服務(wù)器，并獲取域名對應(yīng)的web服務(wù)器對應(yīng)的ip地址；

4.  與web服務(wù)器建立TCP連接；

5.  瀏覽器向web服務(wù)器發(fā)送http請求；

6.  web服務(wù)器響應(yīng)請求，并返回指定url的數(shù)據(jù)（或錯誤信息，或重定向的新的url地址）；

7.  瀏覽器下載web服務(wù)器返回的數(shù)據(jù)及解析html源文件；

8.  生成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如何擴(kuò)展自定義方法

(jQuery.fn.myMethod=function () {         alert('myMethod');  })  // 或者：  (function ($) {          $.fn.extend({               myMethod : function () {                    alert('myMethod');               }          })  })(jQuery)

使用：

$("#div").myMethod();

到此，相信大家對“前端中Vue面試題有哪些”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！