vue常見面試題和答案

vue常見面試題和答案

l.vue優(yōu)點?

答：輕量級框架：只關(guān)注視圖層，是一個構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十

kb;

簡單易學(xué)：國人開發(fā)，中文文檔，不存在語言障礙，易于理解和學(xué)習(xí)；

雙向數(shù)據(jù)綁定：保留了angular的特點,在數(shù)據(jù)操作方面更為簡單;

組件化：保留了react的優(yōu)點,實現(xiàn)了html的封裝和重用,在構(gòu)建單頁面應(yīng)用

方面有著獨特的優(yōu)勢；

視圖，數(shù)據(jù)，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡單，不需要進行邏輯代碼的修改,

只需要操作數(shù)據(jù)就能完成相關(guān)操作；

虛擬DOM:dom操作是非常耗費性能的,不再使用原生的dom操作節(jié)點,

極大解放dom操作，但具體操作的還是dom不過是換了另一種方式;

運行速度更快:相比較與react而言,同樣是操作虛擬dom,就性能而言,vue

存在很大的優(yōu)勢。

2.vue父組件向子組件傳遞數(shù)據(jù)?

答：通過props

3.子組件像父組件傳遞事件?

答:$emit方法

4.v-show和v-if指令的共同點和不同點？

答：共同點：都能控制元素的顯示和隱藏；

不同點：實現(xiàn)本質(zhì)方法不同，v-show本質(zhì)就是通過控制css中的display設(shè)置

為none,控制隱藏，只會編譯一次；v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除

DOM元素，若初始值為false,就不會編譯了。而且v-if不停的銷毀和創(chuàng)建比

較消耗性能。

總結(jié)：如果要頻繁切換某節(jié)點，使用v-show（切換開銷比較小，初始開銷較大）。

如果不需要頻繁切換某節(jié)點使用V-if（初始渲染開銷較小，切換開銷比較大）。

5.如何讓CSS只在當(dāng)前組件中起作用？

答：在組件中的style前面加上scoped

6.vkeep-alive>v/keep-alive>的作用是什么？

答:keep-alive是Vue內(nèi)置的一個組件,可以使被包含的組件保留狀態(tài),或避

免重新渲染。

答:ref="domName"用法:this.$refs.domName

8.說出幾腫vue當(dāng)中的指令和它的用法？

答：v-model雙向數(shù)據(jù)綁定;

v-for循環(huán)；

v-ifv-show顯示與隱藏；

v-on事件；v-once:只綁定一次。

9.vue-loader是什么？使用它的用途有哪些?

答：vue文件的一個加載器，將template/js/style轉(zhuǎn)換成js模塊。

用途：js可以寫es6、style樣式可以scss或less、template可以加jade等

10.為什么使用key?

答：需要使用key來給每個節(jié)點做一個唯一標(biāo)識，Diff算法就可以正確的識別此

節(jié)點。

作用主要是為了高效的更新虛擬

DOMo

ll.axios及蛔

答：請求后臺資源的模塊。npminstallaxios-save裝好,

js中使用import進來，然后get或.post。返回在then函數(shù)中如果成功，失敗

則是在.catch函數(shù)中。

12.v-modal的使用。

答：v-model用于表單數(shù)據(jù)的雙向綁定,其實它就是一個語法糖,這個背后就

做了兩個操作：

v-bind綁定一個value屬性；

v-on指令給當(dāng)前元素綁定input事件。

13.請說出vuexli項目中src目錄每個文件夾和文件的用法？

答：assets文件夾是放靜態(tài)資源；components是放組件；router是定義路由

相關(guān)的配置;app.vue是一個應(yīng)用主組件；main.js是入口文件。

14.分別簡述computed和watch的使用場景

答:computed:

當(dāng)一個屬性受多個屬性影響的時候就需要用到computed

最典型的栗子：購物車商品結(jié)算的時候

watch:

當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用watch

栗子：搜索數(shù)據(jù)

15.v-on可以監(jiān)聽多個方法嗎？

答可以栗子<inputtype="text"

v-on="{input:onInput,focus:onFocus,blur:onBlur,}">0

16.$nextTick的使用

答：當(dāng)你修改了data的值然后馬上獲取這個dom元素的值，是不能獲取到更

新后的值，

你需要使用$nextTick這個回調(diào)，讓修改后的data值渲染更新到dom元素之

后在獲取，才能成功。

17.VU6組件中data為什么必須是一個函數(shù)？

答：因為JavaScript的特性所導(dǎo)致，在component中，data必須以函數(shù)的形

式存在，不可以是對象。

組建中的data寫成一個函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義，這樣每次復(fù)

用組件的時候，都會返回一份新的data，相當(dāng)于每個組件實例都有自己私有的

數(shù)據(jù)空間，它們只負(fù)責(zé)各自維護的數(shù)據(jù)，不會造成混亂。而單純的寫成對象形式，

就是所有的組件實例共用了一個data,這樣改一個全都改了。

18.漸進式框架的理解

答：主張最少；可以根據(jù)不同的需求選擇不同的層級；

19.Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的？

答：vue雙向數(shù)據(jù)綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布訂閱模式的方式來實現(xiàn)的，

也就是說數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨

之發(fā)生改變；

核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是Object.definePropertyO方法。

20.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點

答：單頁面應(yīng)用（SPA）,通俗一點說就是指只有一個主頁面的應(yīng)用，瀏覽器一

開始要加載所有必須的所有的頁面內(nèi)容都包含在這個所謂的主頁

htmljs,css0

面中。但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程

序動態(tài)載入，單頁面的頁面跳轉(zhuǎn)，僅刷新局部資源。多應(yīng)用于pc端。

多頁面（MPA）,就是指一個應(yīng)用中有多個頁面，頁面跳轉(zhuǎn)時是整頁刷新

單頁面的優(yōu)點：

用戶體驗好，快，內(nèi)容的改變不需要重新加載整個頁面，基于這一點spa對服

務(wù)器壓力較小；前后端分離；頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場

動畫）。

單頁面缺點：

不利于seo;導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實現(xiàn)前進、后退。（由于是

單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）；初次加載

時耗時多；頁面復(fù)雜度提高很多。

2Lv-if和?的優(yōu)先級

答：當(dāng)v-if與v-for一起使用時，v-for具有比v-if更高的優(yōu)先級，這意味

著v-if將分別重復(fù)運行于每個v-for循環(huán)中。所以，不推薦v-if和v-for同時

使用。

如果v-if和v-for一起用的話，vue中的的會自動提示v-if應(yīng)該放到外層去。

22.assets和static的命。

答：相同點：assets和static兩個都是存放靜態(tài)資源文件。項目中所需要的資

源文件圖片，字體圖標(biāo)，樣式文件等都可以放在這兩個文件下，這是相同點

不相同點：assets中存放的靜態(tài)資源文件在項目打包時，也就是運行npmrun

build時會將assets中放置的靜態(tài)資源文件進行打包上傳，所謂打包簡單點可以

理解為壓縮體積，代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會放置在

static文件中跟著index.html一同上傳至服務(wù)器。static中放置的靜態(tài)資源文件

就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服

務(wù)器。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static

中的資源文件由于沒有進行壓縮等操作，所以文件的體積也就相對于assets中

打包后的文件提交較大點。在服務(wù)器中就會占據(jù)更大的空間。

建議：將項目中template需要的樣式文件js文件等都可以放置在assets中，

走打包這一流程。減少體積。而項目中引入的第三方的資源文件如iconfoontcss

等文件可以放置在static中，因為這些引入的第三方文件已經(jīng)經(jīng)過處理，我們不

再需要處理，直接上傳。

23.vue常用的修飾將

答:.stop:等同于JavaScript中的event.stopPropagation。，防止事件冒泡;

.prevent:等同于JavaScript中的event.preventDefault()，防止執(zhí)行預(yù)設(shè)的行

為(如果事件可取消，則取消該事件，而不停止事件的進一步傳播)；

.capture:與事件冒泡的方向相反,事件捕獲由外到內(nèi)；

,self:只會觸發(fā)自己范圍內(nèi)的事件，不包含子元素；

.once:只會觸發(fā)一次。

24.vue的兩個核心點

答：數(shù)據(jù)驅(qū)動、組件系統(tǒng)

數(shù)據(jù)驅(qū)動：ViewModel,保證數(shù)據(jù)和視圖的一致性。

組件系統(tǒng)：應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。

25.vue和jQuery的區(qū)別

答:jQuery是使用選擇器($)選取DOM對象，對其進行賦值、取值、事件

綁定等操作其實和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM

對象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：

$("lable)val();,它還是依賴DOM元素的值。

Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了。對數(shù)據(jù)進行操作不再

需要引用相應(yīng)的DOM對象,可以說數(shù)據(jù)和View是分離的，他們通過Vue對

象這個vm實現(xiàn)相互的綁定。這就是傳說中的MVVM。

26.引進組件的步驟

答：在template中引入組件；

在script的第一行用import引入路徑；

用component中寫上組件名稱。

27.delete和Vue.delete刪艙組的區(qū)別

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

是不變。Vue.delete直接刪除了數(shù)組改變了數(shù)組的鍵值。

28.SPA首屏加載慢如何解決

答：安裝動態(tài)懶加載所需插件"吏用CDN資源。

29.Vue-router目庚和location.href有什么區(qū)別

答：使用1(^@打。江出6￡=，/11中來跳轉(zhuǎn),簡單方便，但是刷新了頁面;

使用history.pushState(7url'),無刷新頁面,靜態(tài)跳轉(zhuǎn)；

引進router,然后使用router.push('/url洙跳轉(zhuǎn)，使用了diff算法，實現(xiàn)了按

需加載,減少了dom的消耗。

其實使用router跳轉(zhuǎn)和使用history.pushState()沒什么差別的，因為

vue-router就是用了history.pushState（）,尤其是在history模式下。

30.vueslot

答：簡單來說，假如父組件需要在子組件內(nèi)放一些D0M,那么這些D0M是顯

示、不顯示、在哪個地方顯示、如何顯示，就是slot分發(fā)負(fù)責(zé)的活。

31.你們vue項目是打包了一個js文件，一個css文件，還是有多中文件？

答：根據(jù)vue-cli腳手架規(guī)范,一個js文件,一個CSS文件。

32.Vue里面router-link在電腦上有用，在安卓上沒反應(yīng)怎么解決?

答：Vue路由在Android機上有問題，babel問題，安裝babelpolypill插件

解決。

33.Vue2中注冊在router-link上事件無效解決方法

答：使用@click.native。原因：router-link會阻止click事件，.native指直接

監(jiān)聽一個原生事件。

34.RouterLink在IE和Firefox中不起作用（路由不。黑）的問題

答：方法一：只用a標(biāo)簽，不適用button標(biāo)簽；方法二：使用button標(biāo)簽和

Router.navigate方法

35.axios的特點有哪些

答：從瀏覽器中創(chuàng)建XMLHttpRequests;

node.js倉（］建http請求;

支持PromiseAPI;

攔截請求和響應(yīng)；

轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)；

取消請求；

自動換成

jsono

axios中的發(fā)送字段的參數(shù)是data跟params兩個，兩者的區(qū)別在于params

是跟請求地址一起發(fā)送的，data的作為一個請求體進行發(fā)送

params一般適用于get請求，data一般適用于postput請求。

36.請說下哪vue組件的過程？

答：1.建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。

（os:思考1小時，碼碼10分鐘，程序猿的準(zhǔn)則。）

2.準(zhǔn)備好組件的數(shù)據(jù)輸入。即分析好邏輯，定好props里面的數(shù)據(jù)、類型。

3.準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯，做好要暴露出來的方法。

4.封裝完畢了，直接調(diào)用即可

37.params和query的EBI

答：用法：query要用path來引入，params要用name來引入，接收參數(shù)都

是類似的，分別是和

this.$this.$o

url地址顯示query更加類似于我們ajax中g(shù)et傳參,params則類似于post,

說的再簡單一點，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示

注意點：query刷新不會丟失query里面的數(shù)據(jù)

params刷新會丟失params里面的數(shù)據(jù)。

38.vue初始化頁面閃動問題

答：使用vue開發(fā)時，在vue初始化之前，由于div是不歸vue管的，所以我

們寫的代碼在還沒有解析的情況下會容易出現(xiàn)花屏現(xiàn)象，看到類似于

{{message}}的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓

解決這個問題的。

首先:在css里加上[v-cloak]{

display:none;

}o

如果沒有徹底解決問題，則在根元素加上style="display:

none;":style="{display:'block'}"

39.vue更新數(shù)組時觸發(fā)視圖更新的方法

答:push。;pop();shift();unshift();splice();sort();reverse()

4O.vue常用的UI組件庫

答:MintUI,element,VUX

41.vue修改打包后靜態(tài)資源路徑的修改

答：cli2版本：將config/index.js里的assetsPublicPath的值改為0

build:{

assetsPublicPath:

)

cli3版本：在根目錄下新建vue.config.js文件，然后加上以下內(nèi)容：(如果已

經(jīng)有此文件就直接修改)

module.exports={

publicPath:",//相對于HTML頁面(目錄相同)}

生命周期函數(shù)面試題

1.什么是vue生命周期？有什么作用？

答：每個Vue實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程—例如，需要設(shè)

置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到DOM并在數(shù)據(jù)變化時更新DOM等。

同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同

階段添加自己的代碼的機會。（ps:生命周期鉤子就是生命周期函數(shù)）例如，如

果要通過某些插件操作DOM節(jié)點，如想在頁面渲染完后彈出廣告窗，那我們

最早可在mounted中進行。

2.第一次頁面加載會觸發(fā)哪幾個鉤子？

答:beforeCreate,created,beforeMount,mounted

3.簡述每個周期具體適合哪些場景

答：beforeCreate:在new一個vue實例后，只有一些默認(rèn)的生命周期鉤子和

默認(rèn)事件，其他的東西都還沒創(chuàng)建。在beforeCreate生命周期執(zhí)行的時候,data

和methods中的數(shù)據(jù)都還沒有初始化。不能在這個階段使用data中的數(shù)據(jù)和

methods中的方法

create:data和methods都已經(jīng)被初始化好了，如果要調(diào)用methods中的

方法，或者操作data中的數(shù)據(jù)，最早可以在這個階段中操作

beforeMount:執(zhí)行到這個鉤子的時候，在內(nèi)存中已經(jīng)編譯好了模板了，但是

還沒有掛載到頁面中，此時，頁面還是舊的

mounted:執(zhí)行到這個鉤子的時候，就表示Vue實例已經(jīng)初始化完成了。此時

組件脫離了創(chuàng)建階段，進入到了運行階段。如果我們想要通過插件操作頁面上

的DOM節(jié)點，最早可以在和這個階段中進行

beforeUpdate:當(dāng)執(zhí)行這個鉤子時，頁面中的顯示的數(shù)據(jù)還是舊的，data中

的數(shù)據(jù)是更新后的，頁面還沒有和最新的數(shù)據(jù)保持同步

updated:頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的

beforeDestory:Vue實例從運行階段進入到了銷毀階段，這個時候上所有的

data和methods,指令，過濾器……都是處于可用狀態(tài)。還沒有真正被銷

臼八

雙

destroyed:這個時候上所有的data和methods,指令，過濾器……都

是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。

4.created和mounted的區(qū)別

答：created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲

染成視圖。

mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html

的dom節(jié)點進行一些需要的操作。

5.vue痢在哪個周期函數(shù)

答：一般created/beforeMount/mounted皆可.

比如如果你要操作DOM,那肯定mounted時候才能操作.

6.請詳細(xì)說下你對vue生命周期的理解？

答：總共分為8個階段創(chuàng)建前/后,載入前/后,更新前/后,銷毀前/后。

創(chuàng)建前/后：在beforeCreated階段,vue實例的掛載元素$61和**數(shù)據(jù)對象

**data都為undefined,還未初始化。在created階段，vue實例的數(shù)據(jù)對象

data有了,$el還沒有。

載入前/后：在beforeMount階段，vue實例的$el和data都初始化了，但還

是掛載之前為虛擬的dom節(jié)點，data.message還未替換。在mounted階段,

vue實例掛載完成，data.message成功渲染。

更新前/后：當(dāng)data變化時，會觸發(fā)beforeUpdate和updated方法。

銷毀前/后：在執(zhí)行destroy方法后,對data的改變不會再觸發(fā)周期函數(shù),說

明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然

存在。

vue路由面試題

l.mwm框架是什么？

答：vue是實現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架,當(dāng)視圖改變更新模型層,當(dāng)模

型層改變更新視圖層。在vue中，使用了雙向綁定技術(shù),就是View的變化能實

時讓Model發(fā)生變化，而Model的變化也能實時更新到View。

2.vue-router是什么?它有哪些組件

答：vue用來寫路由一個插件。router-linkrouter-view

3.active-class是哪個組件的屬性？

答：vue-router模塊的router-link組件。children數(shù)組來定義子路由

4.怎么定義vue-router的動態(tài)路由？怎么獲取傳過來的值?

答：在router目錄下的index.js文件中，對path屬性力□上/:id。使用router

對象的

params.ido

S.vue-router有哪幾種導(dǎo)航鉤子？

答：三種，

第一種：是全局導(dǎo)航鉤子：router.beforeEach(to,from,next),作用：跳轉(zhuǎn)前進

行判斷攔截。

第二種：組件內(nèi)的鉤子

第三種：單獨路由獨享組件

6.$route和$router的區(qū)別

答：$router是VueRouter的實例，在script標(biāo)簽中想要導(dǎo)航到不同的URL,

使用$router.push方法。返回上一個歷史historyffl$router.to(-l)

$route為當(dāng)前router跳轉(zhuǎn)對象。里面可以獲取當(dāng)前路由的

name,path,query,parmas等。

7.vue-router的兩種模式

答:hash模式：即地址欄URL中的#符號;

history模式:window