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

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

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

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

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

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

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

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

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

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

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

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

• binding：指令對(duì)象。

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

• oldVnode：上一個(gè)虛擬節(jié)點(diǎn)。

• v-if：判斷對(duì)象是否隱藏。

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

• v-bind：綁定一個(gè)屬性。

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

• to：即將要進(jìn)入的目標(biāo)路由對(duì)象。

• from：當(dāng)前導(dǎo)航正要離開的路由。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首先，實(shí)例化根組件，在根組件中定義組件渲染容器。然后，掛載路由，當(dāng)切換路由時(shí)，將會(huì)切換整個(gè)頁(yè)面。

27、ref屬性有什么作用？

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

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

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

28、Vue. js是什么？

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

Vue. js的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定的組件開發(fā)。

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

Vue.js有以下持性。

（1）MVVM模式。

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

使用MVVM模式有幾大好處。

• 低耦合度，視圖可以獨(dú)立于模型變化和修改，一個(gè)View Model可以綁定到不同的視圖上，當(dāng)視圖變化時(shí)模型可以不變，當(dāng)模型變化時(shí)視圖也可以不變.

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

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

• 可測(cè)試性，可以針對(duì) View Model來(lái)對(duì)視圖進(jìn)行測(cè)試。

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

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

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

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

30、描述vue.js的特點(diǎn)。

Vue. js有以下特點(diǎn)。

• 簡(jiǎn)潔：頁(yè)面由HTML模板+JSON數(shù)據(jù)+ Vue. js實(shí)例化對(duì)象組成。

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

• 組件化：用可復(fù)用、解耦的組件來(lái)構(gòu)造頁(yè)面。

• 輕量：代碼量小，不依賴其他庫(kù)。

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

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

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

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

32、請(qǐng)說(shuō)明<keep-alive>組件的作用。

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

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

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

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

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

axios是在vue2.0中用來(lái)替換 vue-resource.js插件的一個(gè)模塊，是一個(gè)請(qǐng)求后臺(tái)的模。

用 npm install axios安裝 axios。基于 EMAScript 6 的 EMAScript Module規(guī)范，通過(guò) import關(guān)鍵字將 axios導(dǎo)入，并添加到 Vue. js類的原型中。這樣每個(gè)組件（包括vue.js實(shí)例化對(duì)象）都將繼承該方法對(duì)象。它定義了get、post等方法，可以發(fā)送get或者post請(qǐng)求。在then方法中注冊(cè)成功后的回調(diào)函數(shù)，通過(guò)箭頭函數(shù)的作用域特征，可以直接訪問(wèn)組件實(shí)例化對(duì)象，存儲(chǔ)返回的數(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中，當(dāng)調(diào)用 axios.post('api/user'）時(shí)進(jìn)行的是什么操作？

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

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

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

（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標(biāo)簽中加上lang屬性，例如lang="scss"。

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

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

對(duì)“src”屬性插值將導(dǎo)致404請(qǐng)求錯(cuò)誤。應(yīng)使用 v-bind:src格式代替。

代碼如下：

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

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

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

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

<1abe1>選擇你喜歡的運(yùn)動(dòng)</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>

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

<1abe1>選擇你的興趣愛(ài)好</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、什么情況下會(huì)產(chǎn)生片段實(shí)例？

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

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

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

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

通過(guò)“v-if,v-else”指令可以實(shí)現(xiàn)條件選擇。但是，如果是多個(gè)連續(xù)的條件選擇，則需要用到計(jì)算屬性computed。例如在輸入框中未輸入內(nèi)容時(shí)，顯示字符串‘請(qǐng)輸入內(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 | | '請(qǐng)輸入內(nèi)容'       }}})

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

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

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

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

通過(guò)直接索引設(shè)置元素，如app.arr[0]=...

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

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

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

42、如何檢測(cè)對(duì)象變化？

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

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)在是響應(yīng)的app. obj. b=2//'app.obj.b'不是響應(yīng)的data.obj.b=2//data.obj.b'不是響應(yīng)的

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

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

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

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

43、說(shuō)一下Vue.js頁(yè)面閃爍{{message}}。

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

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

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

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

有時(shí)候需要循環(huán)創(chuàng)建input，并用v- model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。此時(shí)可以為v- model綁定數(shù)組的一個(gè)成員 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ù)層級(jí)結(jié)構(gòu)太深的問(wèn)題？

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

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

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

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

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

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

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

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

本文完?

相關(guān)推薦

【前端面試題】01—42道常見(jiàn)的HTML5面試題(附答案)

【前端面試題】02—59道CSS面試題(附答案)

【前端面試題】03—200+道常見(jiàn)JavaScript基礎(chǔ)面試題上（附答案）

【前端面試題】04—33道基礎(chǔ)CSS3面試題(附答案)

【前端面試題】05—17道面向?qū)ο蟮拿嬖囶}(附答案)

【前端面試題】06—16道設(shè)計(jì)模式面試題（附答案）