58 道 Vue 常見面試題，從入門到精通

一、常見問題

vue優點？

答：

輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小隻有幾十 kb ；

簡單易學：國人開發，中文文檔，不存在語言障礙 ，易於理解和學習；

雙向數據綁定：保留了 angular 的特點，在數據操作方面更爲簡單；

組件化：保留了 react 的優點，實現了 html 的封裝和重用，在構建單頁面應用方面有着獨特的優勢；

視圖，數據，結構分離：使數據的更改更爲簡單，不需要進行邏輯代碼的修改，只需要操作數據就能完成相關操作；

虛擬DOM：dom 操作是非常耗費性能的， 不再使用原生的 dom 操作節點，極大解放 dom 操作，但具體操作的還是 dom 不過是換了另一種方式；

運行速度更快：相比較於 react 而言，同樣是操作虛擬 dom ，就性能而言， vue 存在很大的優勢。

vue父組件向子組件傳遞數據？

答：通過 props

子組件像父組件傳遞事件？

答：$emit 方法

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

答:

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

不同點： 實現本質方法不同，v-show 本質就是通過控制 css 中的 display 設置爲 none，控制隱藏，只會編譯一次；

v-if 是動態的向 DOM 樹內添加或者刪除 DOM 元素，若初始值爲 false ，就不會編譯了。而且 v-if 不停的銷燬和創建比較消耗性能。

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

如何讓CSS只在當前組件中起作用?

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

如何獲取dom?

答：ref=“domName” 用法：this.$refs.domName

說出幾種vue當中的指令和它的用法？

答：v-model 雙向數據綁定；

v-for 循環；

v-if v-show 顯示與隱藏；

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

vue-loader是什麼？使用它的用途有哪些？

答：

vue 文件的一個加載器，將 template/js/style 轉換成 js 模塊。

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

爲什麼使用key?

答：需要使用 key 來給每個節點做一個唯一標識， Diff 算法就可以正確的識別此節點。作用主要是爲了高效的更新虛擬 DOM。

axios及安裝?

答：請求後臺資源的模塊。npm install axios —save 裝好， js中使用 import 進來，然後 .get 或 .post 。返回在 .then 函數中如果成功，失敗則是在 .catch 函數中。

v-modal的使用

答：v-model 用於表單數據的雙向綁定，其實它就是一個語法糖，這個背後就做了兩個操作：

v-bind 綁定一個 value 屬性；v-on 指令給當前元素綁定 input 事件。

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

答：assets 文件夾是放靜態資源；components 是放組件；router 是定義路由相關的配置; app.vue 是一個應用主組件；main.js 是入口文件。

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

答：

computed : 當一個屬性受多個屬性影響的時候就需要用到 computed ，最典型的栗子：購物車商品結算的時候

watch : 當一條數據影響多條數據的時候就需要用 watch ，栗子：搜索數據

v-on可以監聽多個方法嗎？

答：可以，栗子：。

$nextTick的使用

答：當你修改了data 的值然後馬上獲取這個 dom 元素的值，是不能獲取到更新後的值， 你需要使用 $nextTick 這個回調，讓修改後的 data 值渲染更新到 dom 元素之後在獲取，才能成功。

vue組件中data爲什麼必須是一個函數？

答：因爲 JavaScript 的特性所導致，在 component 中，data 必須以函數的形式存在，不可以是對象。

組建中的 data 寫成一個函數，數據以函數返回值的形式定義，這樣每次複用組件的時候，都會返回一份新的 data ，相當於每個組件實例都有自己私有的數據空間，它們只負責各自維護的數據，不會造成混亂。

而單純的寫成對象形式，就是所有的組件實例共用了一個 data ，這樣改一個全都改了。

漸進式框架的理解

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

Vue中雙向數據綁定是如何實現的？

答：vue 雙向數據綁定是通過 數據劫持 結合 發佈訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟着變化，視圖變化，數據也隨之發生改變；

核心：關於VUE雙向數據綁定，其核心是 Object.defineProperty() 方法。

單頁面應用和多頁面應用區別及優缺點

答：單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。

但在寫的時候，還是會分開寫（頁面片段），然後在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用於pc端。

多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新

單頁面的優點：用戶體驗好，快，內容的改變不需要重新加載整個頁面，基於這一點spa對服務器壓力較小；前後端分離；頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）。

單頁面缺點：不利於seo；導航不可用，如果一定要導航需要自行實現前進、後退。（由於是單頁面不能用瀏覽器的前進後退功能，所以需要自己建立堆棧管理）；初次加載時耗時多；頁面複雜度提高很多。

v-if和v-for的優先級

答：當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，這意味着 v-if 將分別重複運行於每個 v-for 循環中。

所以，不推薦 v-if 和 v-for 同時使用。如果 v-if 和 v-for 一起用的話，vue中的的會自動提示 v-if 應該放到外層去。

assets和static的區別

答：相同點：assets 和 static 兩個都是存放靜態資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點

不相同點：assets 中存放的靜態資源文件在項目打包時，也就是運行 npm run build 時會將 assets 中放置的靜態資源文件進行打包上傳，所謂打包簡單點可以理解爲壓縮體積，代碼格式化。

而壓縮後的靜態資源文件最終也都會放置在 static 文件中跟着 index.html 一同上傳至服務器。

static 中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。

因爲避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是 static 中的資源文件由於沒有進行壓縮等操作，所以文件的體積也就相對於 assets 中打包後的文件提交較大點。在服務器中就會佔據更大的空間。

建議： 將項目中 template需要的樣式文件js文件等都可以放置在 assets 中，走打包這一流程。減少體積。

而項目中引入的第三方的資源文件如iconfoont.css 等文件可以放置在 static 中，因爲這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。

vue常用的修飾符

答：

.stop：等同於 JavaScript 中的 event.stop-Propagation() ，防止事件冒泡；

.prevent ：

等同於 JavaScript 中的 event.preventDe-fault() ，防止執行預設的行爲（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；

.capture ：與事件冒泡的方向相反，事件捕獲由外到內；

.self ：只會觸發自己範圍內的事件，不包含子元素；

.once ：只會觸發一次。

vue的兩個核心點

答：數據驅動、組件系統

數據驅動：ViewModel，保證數據和視圖的一致性。

組件系統： 應用類UI可以看作全部是由組件樹構成的。

vue和jQuery的區別

答：jQuery是使用選擇器（ $ ）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象，而數據和界面是在一起的。

比如需要獲取label標籤的內容：$(“lable”).val(); ,它還是依賴DOM元素的值。Vue則是通過Vue對象將數據和View完全分離開來了。

對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

引進組件的步驟

答: 在template中引入組件；在script的第一行用import引入路徑；用component中寫上組件名稱。

delete和Vue.delete刪除數組的區別

答：delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數組 改變了數組的鍵值。

SPA首屏加載慢如何解決

答：安裝動態懶加載所需插件；使用CDN資源。

Vue-router跳轉和location.href有什麼區別

答：使用 location.href= /url 來跳轉，簡單方便，但是刷新了頁面；使用 history.pushState( /url ) ，無刷新頁面，靜態跳轉；

引進 router ，然後使用 router.push( /url ) 來跳轉，使用了 diff 算法，實現了按需加載，減少了 dom 的消耗。

其實使用 router 跳轉和使用 history.pushState() 沒什麼差別的，因爲vue-router就是用了 history.pushState() ，尤其是在history模式下。

30. vue slot

答：簡單來說，假如父組件需要在子組件內放一些DOM，那麼這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。

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

答：根據vue-cli腳手架規範，一個js文件，一個CSS文件。

Vue裏面router-link在電腦上有用，在安卓上沒反應怎麼解決？

答：Vue路由在Android機上有問題，babel問題，安裝babel polypill插件解決。

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

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

RouterLink在IE和Firefox中不起作用（路由不跳轉）的問題

答: 方法一：只用a標籤，不適用button標籤；方法二：使用button標籤和Router.navigate方法

axios的特點有哪些

答：

從瀏覽器中創建XMLHttpRequests；

node.js創建http請求；

支持Promise API；

攔截請求和響應；

轉換請求數據和響應數據；

取消請求；

自動換成json。

axios中的發送字段的參數是data跟params兩個，兩者的區別在於params是跟請求地址一起發送的，data的作爲一個請求體進行發送

params一般適用於get請求，data一般適用於post put 請求。

請說下封裝 vue 組件的過程？

答：

建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考1小時，碼碼10分鐘，程序猿的準則。)

準備好組件的數據輸入。即分析好邏輯，定好 props 裏面的數據、類型。

準備好組件的數據輸出。即根據組件邏輯，做好要暴露出來的方法。

封裝完畢了，直接調用即可。

params和query的區別

答：用法：query要用path來引入，params要用name來引入，接收參數都是類似的，分別是 this.$route.query.name 和 this.$route.params.name 。

url地址顯示：query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示

注意點：query刷新不會丟失query裏面的數據 params刷新 會 丟失 params裏面的數據。

vue初始化頁面閃動問題

答：使用vue開發時，在vue初始化之前，由於 div 是不歸 vue 管的，所以我們寫的代碼在還沒有解析的情況下會容易出現花屏現象，看到類似於 {{message}} 的字樣，

雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。

首先：在css里加上 [v-cloak] { display: none; } 。如果沒有徹底解決問題，則在根元素加上 style=“display: none;” :style="{display: block }"

vue更新數組時觸發視圖更新的方法

答：push()；pop()；shift()；unshift()；sort()；splice()；reverse()

vue常用的UI組件庫

答：Mint UI，element，VUX

vue修改打包後靜態資源路徑的修改

答：cli2 版本：將 config/index.js 裏的 assetsPublicPath 的值改爲 ./ 。

build: { 
// ... 
  assetsPublicPath:  ./ , 
// ...  
}

cli3版本：在根目錄下新建vue.config.js 文件，然後加上以下內容：（如果已經有此文件就直接修改）

module.exports = { 
  publicPath: , // 相對於 HTML 頁面（目錄相同）    
} 
生命週期函數面

二、生命週期函數面試題篇

什麼是 vue 生命週期？有什麼作用？

答：每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。

同時在這個過程中也會運行一些叫做 生命週期鉤子 的函數，這給了用戶在不同階段添加自己的代碼的機會。（ps：生命週期鉤子就是生命週期函數）

例如，如果要通過某些插件操作DOM節點，如想在頁面渲染完後彈出廣告窗， 那我們最早可在mounted 中進行。

第一次頁面加載會觸發哪幾個鉤子？

答：beforeCreate， created， before-Mount， mounted

簡述每個週期具體適合哪些場景

答：

beforeCreate： 在new一個vue實例後，只有一些默認的生命週期鉤子和默認事件，其他的東西都還沒創建。

在beforeCreate生命週期執行的時候，data和methods中的數據都還沒有初始化。不能在這個階段使用data中的數據和methods中的方法

create：data 和 methods都已經被初始化好了，如果要調用 methods 中的方法，或者操作 data 中的數據，最早可以在這個階段中操作

beforeMount： 執行到這個鉤子的時候，在內存中已經編譯好了模板了，但是還沒有掛載到頁面中，此時，頁面還是舊的

mounted： 執行到這個鉤子的時候，就表示Vue實例已經初始化完成了。此時組件脫離了創建階段，進入到了運行階段。如果我們想要通過插件操作頁面上的DOM節點，最早可以在和這個階段中進行

beforeUpdate： 當執行這個鉤子時，頁面中的顯示的數據還是舊的，data中的數據是更新後的， 頁面還沒有和最新的數據保持同步

updated： 頁面顯示的數據和data中的數據已經保持同步了，都是最新的

beforeDestory：Vue實例從運行階段進入到了銷燬階段，這個時候上所有的 data 和 methods ， 指令， 過濾器 ……都是處於可用狀態。還沒有真正被銷燬

destroyed： 這個時候上所有的 data 和 methods ， 指令， 過濾器 ……都是處於不可用狀態。組件已經被銷燬了。

created和mounted的區別

答：created:在模板渲染成html前調用，即通常初始化某些屬性值，然後再渲染成視圖。

mounted:在模板渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。

vue獲取數據在哪個週期函數

答：一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.

請詳細說下你對vue生命週期的理解？

答：總共分爲8個階段創建前/後，載入前/後，更新前/後，銷燬前/後。

創建前/後： 在beforeCreate階段，vue實例的掛載元素 $el 和 數據對象 data 都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了， $el 還沒有。

載入前/後： 在beforeMount階段，vue實例的 $el 和data都初始化了，但還是掛載之前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/後： 當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後： 在執行destroy方法後，對data的改變不會再觸發週期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在。

三、vue 路由面試題篇

mvvm 框架是什麼？

答：vue是實現了雙向數據綁定的mvvm框架，當視圖改變更新模型層，當模型層改變更新視圖層。在vue中，使用了雙向綁定技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。

vue-router 是什麼?它有哪些組件

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

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

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

怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值？

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

vue-router 有哪幾種導航鉤子?

答：三種，

第一種： 是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。

第二種： 組件內的鉤子

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

$route 和 $router 的區別

答：$router 是VueRouter的實例，在script標籤中想要導航到不同的URL,使用 $router.push 方法。返回上一個歷史history用 $router.to(-1)

$route 爲當前router跳轉對象。裏面可以獲取當前路由的name,path,query,parmas等。

vue-router的兩種模式

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

history模式：window.history對象打印出來可以看到裏邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）。

vue-router實現路由懶加載（ 動態加載路由 ）

答：三種方式

第一種：vue異步組件技術 ==== 異步加載，vue-router配置路由 , 使用vue的異步組件技術 , 可以實現按需加載 .但是,這種情況下一個組件生成一個js文件。

第二種： 路由懶加載(使用import)。

第三種：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需加載。這種情況下，多個路由指定相同的chunkName，會合並打包成一個js文件。

四、vuex常見面試題篇

vuex是什麼？怎麼使用？哪種功能場景使用它？

答：vue框架中狀態管理。在main.js引入store，注入。

新建了一個目錄store.js，…… export 。

場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車

vuex有哪幾種屬性？

答：有五種，分別是 State、 Getter、Mutation 、Action、 Module

state => 基本數據(數據源存放地)

getters => 從基本數據派生出來的數據

mutations => 提交更改數據的方法，同步！

actions => 像一個裝飾器，包裹mutations，使之可以異步。

modules => 模塊化Vuex

Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？

答：如果請求來的數據是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state裏。

如果被其他地方複用，這個很大機率上是需要的，如果需要，請將請求放入action裏，方便複用。

以上面試題僅供個人學習，如有錯誤請指正。謝謝。

---

摘至開課吧前端團隊，閱讀後頗有收穫分享至此，希望對大家有所幫助~