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

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

1. 談?wù)勀銓?duì)MVVM開發(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ù)改變時(shí)會(huì)觸發(fā) View 層的刷新，View 中由于用戶交互操作而改變的數(shù)據(jù)也會(huì)在 Model 中同步。

這種模式實(shí)現(xiàn)了 Model 和 View 的數(shù)據(jù)自動(dòng)同步，因此開發(fā)者只需要專注對(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 來回切換；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)，使用v-show會(huì)更加節(jié)省性能上的開銷；當(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)依賴，在屬性被訪問和修改時(shí)通知變化。

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 程序?qū)嵗鼤?huì)在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項(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è)輸入框組件，用戶輸入時(shí)，同步父組件頁面中的數(shù)據(jù)

具體思路：父組件通過 props 傳值給子組件，子組件通過 $emit 來通知父組件修改相應(yīng)的props值，具體實(shí)現(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í)，父子組件中的數(shù)據(jù)是同步改變的：

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

template: `      <div>        <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->        <comp-one v-model="value"></comp-one>      </div>    `

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屬性表示深層遍歷，但是這么寫會(huì)監(jiān)控obj的所有屬性變化，并不是我們想要的效果，所以做點(diǎn)修改：

watch: {     'obj.a': {        handler (newName, oldName) {          console.log('obj.a changed')        }     }    }

還有一種方法，可以通過computed 來實(shí)現(xiàn)，只需要：

computed: {      a1 () {        return this.obj.a      }  }

利用計(jì)算屬性的特性來實(shí)現(xiàn)，當(dāng)依賴改變時(shí)，便會(huì)重新計(jì)算一個(gè)新值。

7. Vue中給data中的對(duì)象屬性添加一個(gè)新的屬性時(shí)會(huì)發(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>

點(diǎn)擊button會(huì)發(fā)現(xiàn)，obj.b 已經(jīng)成功添加，但是視圖并未刷新：

原因在于在Vue實(shí)例創(chuàng)建時(shí)，obj.b并未聲明，因此就沒有被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)用的首屏加載速度慢的問題？

•  將公用的JS庫(kù)通過script標(biāo)簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源文件，提高下載速度；

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

•  加一個(gè)首屏 loading 圖，提升用戶體驗(yàn)；

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

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

在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過 HTTP 進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過三次握手，每次握手需要花費(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)俗稱 CSS 精靈，這是將多張圖片合并成一張圖片達(dá)到減少 HTTP 請(qǐng)求的一種解決方案，可以通過 CSS background 屬性來訪問圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)。

•  合并 CSS 和 JS 文件：現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請(qǐng)求數(shù)量，可以通過這些工具再發(fā)布前將多個(gè) CSS 或者 多個(gè) JS 合并成一個(gè)文件。

•  采用 lazyLoad：俗稱懶加載，可以控制網(wǎng)頁上的內(nèi)容在一開始無需加載，不需要發(fā)請(qǐng)求，等到用戶操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁資源一次性請(qǐng)求數(shù)量。

  1. 控制資源文件加載優(yōu)先級(jí)

瀏覽器在加載 HTML 內(nèi)容時(shí)，是將 HTML 內(nèi)容從上至下依次解析，解析到 link 或者 script 標(biāo)簽就會(huì)加載 href 或者 src 對(duì)應(yīng)鏈接內(nèi)容，為了***時(shí)間展示頁面給用戶，就需要將 CSS 提前加載，不要受 JS 加載影響。

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

  1. 利用瀏覽器緩存

  瀏覽器緩存是將網(wǎng)絡(luò)資源存儲(chǔ)在本地，等待下次請(qǐng)求該資源時(shí)，如果資源已經(jīng)存在就不需要到服務(wù)器重新請(qǐng)求該資源，直接在本地讀取該資源。

  2. 減少重排（Reflow）

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

減少 Reflow，如果需要在 DOM 操作時(shí)添加樣式，盡量使用 增加 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ù)器，并獲取域名對(duì)應(yīng)的web服務(wù)器對(duì)應(yīng)的ip地址；

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

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

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

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

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

12. jQuery獲取的dom對(duì)象和原生的dom對(duì)象有何區(qū)別？

js原生獲取的dom是一個(gè)對(duì)象，jQuery對(duì)象就是一個(gè)數(shù)組對(duì)象，其實(shí)就是選擇出來的元素的數(shù)組集合，所以說他們兩者是不同的對(duì)象類型不等價(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();

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

名稱欄目：前端中Vue面試題有哪些
鏈接地址：http://www.chinadenli.net/article18/jcoigp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、域名注冊(cè)、定制網(wǎng)站、響應(yīng)式網(wǎng)站、微信小程序、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)