【前端面試題】07—47道基礎的VueJS面試題(附答案)

VueJS作為一個輕量級框架， Vue. js提供了如此強大的功能，引起了大量開發(fā)者的關(guān)注。

如今，更多的企業(yè)開始基于 Vue.js框架開發(fā)項目， Vue.js利用 EMAScript5提供的特性實現(xiàn)數(shù)據(jù)綁定，提供了組件開發(fā)，有助于加快項目的開發(fā)。

同 Angular與 React一樣， Vue.js中的數(shù)據(jù)丟失、數(shù)據(jù)雙向綁定、虛擬DOM的實現(xiàn)、組件開發(fā)、生命周期、組件通信等，這些基礎技術(shù)是開發(fā)者應該掌握的內(nèi)容。

• 全局自定義指令：vue.js對象提供了 directive方法，可以用來自定義指令。directive方法接受兩個參數(shù)，一個是指令名稱，另一個是函數(shù)。

• 局部自定義指令：通過組件的 directives屬性定義。

• bind：在指令第一次綁定到元素時調(diào)用。

• inserted：在被綁定元素插入父節(jié)點時調(diào)用（Vue2.0新增的）。

• update：在所在組件的 VNode更新時調(diào)用。

• componentUpdated：在指令所在組件的 VNode及其子 VNode全部更新后調(diào)用（Vue2.0新增的）。

• unbind：只調(diào)用一次，在指令與元素解除綁定時調(diào)用。

• el：指令所綁定的元素。

• binding：指令對象。

• vnode：虛擬節(jié)點。

• oldVnode：上一個虛擬節(jié)點。

• v-if：判斷對象是否隱藏。

• v-for：循環(huán)渲染。

• v-bind：綁定一個屬性。

• v- model：實現(xiàn)數(shù)據(jù)雙向綁定。

• to：即將要進入的目標路由對象。

• from：當前導航正要離開的路由。

• next：一定要用這個函數(shù)才能到達下一個路由，如果不用就會遭到攔截。

• 在自身實例化時向?qū)傩杂嗛喥鳎╠ep）里面添加自己。

• 自身必須有一個 update( )方法。

• 在 dep.notice()發(fā)布通知時，能調(diào)用自身的 updat()方法，并觸發(fā) Compile中綁定的回調(diào)函數(shù)。

• beforeCreate：在實例初始化之后，數(shù)據(jù)觀測者（ data observer）和 event/ watcher事件配置之前調(diào)用。

• created：在實例創(chuàng)建完成后立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測者，屬性和方法的運算， watch/event事件回調(diào)。然而，掛載階段還沒開始，$el屬性目前不可見。

• beforeMount：在掛載開始之前調(diào)用，相關(guān)的 render函數(shù)首次調(diào)用。

• mounted:    el被新創(chuàng)建的vm.$el替換，并且在掛載到實例上之后再調(diào)用該鉤子如果root實例掛載了一個文檔內(nèi)元素，當調(diào)用 mounted時vm.sel也在文檔內(nèi)。

• beforeUpdate：在數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前。

• updated：由于數(shù)據(jù)更改導致的虛擬DOM重新渲染和打補丁，在這之后會調(diào)用該鉤。

• beforeDestroy：在實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。

• destroyed：在 Vue. js實例銷毀后調(diào)用。調(diào)用后，Vue. js實例指示的所有東西都會解除綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。

• activated在keep- alive組件激活時調(diào)用；

• deactivated在keep-live組件停用時調(diào)用。

<！--應用程序--><div id="app"><ickt></ickt></div><！--模板--><template id="demo"><！--模板元素要有同一個根元素--><div><h1>{{msg}}</h1></div></template><script type="text/javascript">//定義組件類var Ickt = Vue.extend ({template：'#demo',data:function(){return {msg：'有課前端網(wǎng)'}}})//注冊組件Vue .component（'ickt, Ickt）//定義Vue實例化對象var app= new Vue ({el：'#app',data:{}})</script>

new Vue({el：'#icketang', router:router, template：'<router-view></router-view>'})

首先，實例化根組件，在根組件中定義組件渲染容器。然后，掛載路由，當切換路由時，將會切換整個頁面。

27、ref屬性有什么作用？

有時候，為了在組件內(nèi)部可以直接訪問組件內(nèi)部的一些元素，可以定義該屬性此時可以在組件內(nèi)部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。

<div id="icke">< span ref="msg">有課前端網(wǎng)</span>< span ref=" otherMsg">專業(yè)前端技術(shù)學習網(wǎng)校</span></div>app. $refs. msg. text Content//有課前端網(wǎng)app. $refs.otherMsg. textContent//專業(yè)前端技術(shù)學習網(wǎng)校

注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。

28、Vue. js是什么？

Vue. js是一套構(gòu)建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue.js采用自下而上增量開發(fā)的設計。Vue.js的核心庫只關(guān)注視圖層，并且容易學習，易于與其他庫或已有項目整合。另外， Vue. js完全有能力驅(qū)動采用單文件組件以及Vue.js生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用。

Vue. js的目標是通過盡可能簡單的API實現(xiàn)響應式的數(shù)據(jù)綁定的組件開發(fā)。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

數(shù)據(jù)模型（ Model）發(fā)生改變，視圖（View）監(jiān)聽到變化，也同步改變；視圖（View）發(fā)生改變，數(shù)據(jù)模型（ Model）監(jiān)聽到改變，也同步改變。

使用MVVM模式有幾大好處。

• 低耦合度，視圖可以獨立于模型變化和修改，一個View Model可以綁定到不同的視圖上，當視圖變化時模型可以不變，當模型變化時視圖也可以不變.

• 可重用性，可以把一些視圖的邏輯放在 ViewModel里面，讓很多視圖復用這段視圖邏輯。

• 獨立開發(fā)，開發(fā)人員可以專注于業(yè)務邏輯和數(shù)據(jù)的開發(fā)。設計人員可以專注于視圖的設計。

• 可測試性，可以針對 View Model來對視圖進行測試。

（2）組件化開發(fā)

（3）指令系統(tǒng)

（4）Vue2.0開始支持虛擬DOM。

但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。

30、描述vue.js的特點。

Vue. js有以下特點。

• 簡潔：頁面由HTML模板+JSON數(shù)據(jù)+ Vue. js實例化對象組成。

• 數(shù)據(jù)驅(qū)動：自動計算屬性和追蹤依賴的模板表達式。

• 組件化：用可復用、解耦的組件來構(gòu)造頁面。

• 輕量：代碼量小，不依賴其他庫。

• 快速：精確而有效地批量實現(xiàn)DOM更新。

• 易獲取：可通過npm、 bower等多種方式安裝，很容易融入。

31、在vue.js中如何綁定事件？

通過在v-on后跟事件名稱=“事件回調(diào)函數(shù)( )”的語法綁定事件。事件回調(diào)函數(shù)的參數(shù)集合( )可有可無。如果存在參數(shù)集合( )，事件回調(diào)函數(shù)的參數(shù)需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數(shù)據(jù)。如果沒有參數(shù)集合，此時事件回調(diào)函數(shù)有一個默認參數(shù)，就是事件對象。事件回調(diào)函數(shù)要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數(shù)據(jù)以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=“事件回調(diào)函數(shù)( )”。

32、請說明<keep-alive>組件的作用。

當<keep- alive>包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。

< keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現(xiàn)在父組件鏈中。

當在<keep- alive>內(nèi)切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數(shù)將會執(zhí)行。

<keep-alive><component :is="view"></component></keep-alive >

33、axios是什么？如何使用它？

axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求后臺的模。

用 npm install axios安裝 axios。基于 EMAScript 6 的 EMAScript Module規(guī)范，通過 import關(guān)鍵字將 axios導入，并添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發(fā)送get或者post請求。在then方法中注冊成功后的回調(diào)函數(shù)，通過箭頭函數(shù)的作用域特征，可以直接訪問組件實例化對象，存儲返回的數(shù)據(jù)。

import Vue from ' vue' import axios from 'axios'；Vue.prototype.$http=axios； new Vue ({el：' ickt',data：{msg：' '}，template：'<h1> { { msg } }</h1>'，created:function() {this.$http.get( 'data.json' ).then（res => {this. msg= res .data. data})}})

34、在 axios中，當調(diào)用 axios.post('api/user'）時進行的是什么操作？

當調(diào)用post方法表示在發(fā)送post異步請求。

35、sass是什么？如何在ue中安裝和使用？

sass是一種CSS預編譯語言安裝和使用步驟如下。

（1）用npm安裝加載程序（ sass-loader、 css-loader等加載程序)。

（2）在 webpack. config. js中配置sass加載程序。

模塊module：{//加載程序loaders:[//加載scss {test:/ \ .scss$ /, loader : 'vue-style-loader！css-loader！sass-loader '        }      ]}

（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。

<style type="text/css" lang="scss">$color:red； h1 {color: $color;}</style>

36、如何在 Vue. js中循環(huán)插入圖片？

對“src”屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。

代碼如下：

<ul class="list"><li v-for="item in list"><img ：src=" 'img/' + item.url" alt="></1i></u1>

注意：vue1.0中支持屬性插值，在2.0版本中，只允許通過v-bind指令或者冒號語法糖“ : ”實現(xiàn)屬性動態(tài)綁定。

37、如何為選框元素自定義綁定的數(shù)據(jù)值？

對于單選框， value通常是靜態(tài)字符串，如果v- model綁定的數(shù)據(jù)與某個 value值相等，則那個單選框被選中。

<1abe1>選擇你喜歡的運動</1abe1><！--數(shù)據(jù)雙向綁定--><label>籃球<input  type="radio"  v-model="sports"  value="basketball"></label><label>足球<input  type="radio"  v-model="sports"  value="football"></label><label>網(wǎng)球<input  type="radio"  v-model="sports"  value="netball"></label>

對于多選框，v- model綁定變量的值，通常是布爾值，true表示選中， false表示未選中。如果要自定義綁定數(shù)據(jù)的值，需要用v-bind指令設置true- value（選中時的值）以及 false- value（未選中時的值）。

<1abe1>選擇你的興趣愛好</labe1><label>足球<input type="checkbox"  v-model="intrest. football"></label><label>籃球<input type="checkbox"  v-model="intrest. basketball"  v-bind:true-value=" trueValue" v-bind:false-value="falsevalue"></label>

38、什么情況下會產(chǎn)生片段實例？

在以下情況下會產(chǎn)生片段實例模板包含多個頂級元素；模板只包含普通文本；模板只包含其他組件（其他組件可能是一個片段實例）；模板只包含一個元素指令，如vue- router的< router-view>；模板根節(jié)點有一個流程控制指令，如v-if或v-for。

這些情況讓實例有未知數(shù)量的頂級元素，模板將把它的DOM內(nèi)容當作片段。片段實例仍然會正確地渲染內(nèi)容。不過，模板沒有一個根節(jié)點，它的$el指向一個錨節(jié)點，即一個空的文本節(jié)點（在開發(fā)模式下是一個注釋節(jié)點）。

注意：在Vue2.0中，組件的模板只允許有且只有一個根節(jié)點。

39、實現(xiàn)多個根據(jù)不同條件顯示不同文字的方法。

通過“v-if,v-else”指令可以實現(xiàn)條件選擇。但是，如果是多個連續(xù)的條件選擇，則需要用到計算屬性computed。例如在輸入框中未輸入內(nèi)容時，顯示字符串‘請輸入內(nèi)容’，否則顯示輸入框中的內(nèi)容，代碼如下。

<div id="app"><input type="text  v-model="inputvalue"><hl>  {  { showValue } }</h1></div>var app = new Vue ( { e1："#app'， data：{inputvalue：'  'computed: { showValue:function ( ) {return this. inputvalue | | '請輸入內(nèi)容'       }}})

40、什么是數(shù)據(jù)的丟失？

如果在初始化時沒有定義數(shù)據(jù)，之后更新的數(shù)據(jù)是無法觸發(fā)頁面渲染更新的，這部分數(shù)據(jù)是丟失的數(shù)據(jù)（因為沒有設置特性），這種現(xiàn)象稱為數(shù)據(jù)的丟失。

41、如何檢測數(shù)據(jù)變化？

由于 JavaScript特性的限制， Vue. js不能檢測到下面數(shù)組的變化，即以下數(shù)組中改變的數(shù)據(jù)“丟失”了。

通過直接索引設置元素，如app.arr[0]=...

修改數(shù)據(jù)的長度，如 app. arr.length。

為了解決該問題，Vue.js擴展了觀察數(shù)組，為它添加了一個$set( )方法，用該方法修改的數(shù)組，能觸發(fā)視圖更新，檢測數(shù)據(jù)變化。

app.$set(app. arr, 5， 500);

42、如何檢測對象變化？

由于 JavaScript特性的限制，Vue.js不能檢測到對象屬性的添加或刪除。因為Vue.js在初始化時將屬性轉(zhuǎn)化為 getter/setter，所以屬性必須在data對象中定義，才能在初始化時讓Vue.js轉(zhuǎn)換它并讓它響應，例如以下代碼

var data ={ obj:{ a:1}}var app= new Vue ({el：'#app ',data:data })app.obj.a=10// 'app.obj.a'和'data.obj.a'現(xiàn)在是響應的app. obj. b=2//'app.obj.b'不是響應的data.obj.b=2//data.obj.b'不是響應的

如果需要在實例創(chuàng)建之后添加屬性并且讓它能夠響應，可以使用$set實例方法。

app.$set（app.obj，'b'，500）// 'app.obj.b'和'data.obj.b'現(xiàn)在是響應的

對于普通數(shù)據(jù)對象，可以使用全局方法Vue.set（ object,key, value）。

Vue.set（data.obj，"b'，500）//'app.obj.b'和'cata,obj.b'現(xiàn)在是響應的

43、說一下Vue.js頁面閃爍{{message}}。

Vue. js提供了一個v- cloak指令，該指令一直保持在元素上，直到關(guān)聯(lián)實例結(jié)束編譯。當和CSS一起使用時，這個指令可以隱藏未編譯的標簽，直到實例編譯結(jié)束。用法如下。

[v-cloak ]{ display:none;}<div v-cloak> { { title } }</div>

這樣<div>不會顯示，直到編譯結(jié)束。

44、如何在v-for 循環(huán)中實現(xiàn)v-model 數(shù)據(jù)的雙向綁定？

有時候需要循環(huán)創(chuàng)建input，并用v- model實現(xiàn)數(shù)據(jù)的雙向綁定。此時可以為v- model綁定數(shù)組的一個成員 selected [$ index]，這樣就可以給不同的 input綁定不同的v- model，從而分別操作它們。

<div v-for= " ( item, index ) in arr"><input type= "text "  v-model="arr [index ] "><h1> { { arr [index ] } } </h1></div>

45、如何解決數(shù)據(jù)層級結(jié)構(gòu)太深的問題？

在開發(fā)業(yè)務時，經(jīng)常會岀現(xiàn)異步獲取數(shù)據(jù)的情況，有時數(shù)據(jù)層次比較深，如以下代碼。

<span 'v-text="a.b.c.d"></span>

可以使用vm.$set手動定義一層數(shù)據(jù)。

vm.$set ("demo"，a .b.c.d)

46、Vue.js文件中的樣式覆蓋不生效的問題如何解決？

47、在 Vue. js開發(fā)環(huán)境下調(diào)用接口，如何避免跨域？

在工程目錄 config/ index.js內(nèi)對 proxyTable項進行如下配置。

proxyTable:{'/api '：{target:http://xxxxxx.com changeOrigin:true,pathRewrite:{'^/api'：' '}}}

本文完?