58 道 Vue 常見面試題

1.vue優勢？

答：

• 輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小隻有幾十 kb ；
• 簡單易學：國人開發，中文文檔，不存在語言障礙 ，易於理解和學習；
• 雙向數據綁定：保留了 angular 的特色，在數據操做方面更爲簡單；
• 組件化：保留了 react 的優勢，實現了 html 的封裝和重用，在構建單頁面應用方面有着獨特的優點；
• 視圖，數據，結構分離：使數據的更改更爲簡單，不須要進行邏輯代碼的修改，只須要操做數據就能完成相關操做；
• 虛擬DOM：dom 操做是很是耗費性能的， 再也不使用原生的 dom 操做節點，極大解放 dom 操做，但具體操做的仍是 dom 不過是換了另外一種方式；
• 運行速度更快：相比較於 react 而言，一樣是操做虛擬 dom ，就性能而言， vue 存在很大的優點。

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

答：經過 props

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

答：$emit 方法

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

答:

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

不一樣點： 實現本質方法不一樣，v-show 本質就是經過控制 css 中的 display 設置爲 none，控制隱藏，只會編譯一次；v-if 是動態的向 DOM 樹內添加或者刪除 DOM 元素，若初始值爲 false ，就不會編譯了。並且 v-if 不停的銷燬和建立比較消耗性能。總結：若是要頻繁切換某節點，使用 v-show (切換開銷比較小，初始開銷較大)。若是不須要頻繁切換某節點使用 v-if（初始渲染開銷較小，切換開銷比較大）。

5.  如何讓CSS只在當前組件中起做用?

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

6.  <keep-alive></keep-alive> 的做用是什麼?

答: keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。

7.如何獲取dom?

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

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

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

v-for 循環；

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

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

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

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

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

10.爲何使用key?

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

11.axios及安裝?

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

12.v-modal的使用

答：v-model 用於表單數據的雙向綁定，其實它就是一個語法糖，這個背後就作了兩個操做：v-bind 綁定一個 value 屬性；v-on 指令給當前元素綁定 input 事件。

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

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

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

答：

• computed : 當一個屬性受多個屬性影響的時候就須要用到 computed ，最典型的栗子：購物車商品結算的時候
• watch : 當一條數據影響多條數據的時候就須要用 watch ，栗子：搜索數據

15.v-on能夠監聽多個方法嗎？

答：能夠，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

16.$nextTick的使用

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

17.vue組件中data爲何必須是一個函數？

答：由於 JavaScript 的特性所致使，在 component 中，data 必須以函數的形式存在，不能夠是對象。組建中的 data 寫成一個函數，數據以函數返回值的形式定義，這樣每次複用組件的時候，都會返回一份新的 data ，至關於每一個組件實例都有本身私有的數據空間，它們只負責各自維護的數據，不會形成混亂。而單純的寫成對象形式，就是全部的組件實例共用了一個 data ，這樣改一個全都改了。

18.漸進式框架的理解

答：主張最少；能夠根據不一樣的需求選擇不一樣的層級；

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

答：vue 雙向數據綁定是經過 數據劫持 結合 發佈訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟着變化，視圖變化，數據也隨之發生改變；核心：關於VUE雙向數據綁定，其核心是  Object.defineProperty() 方法。

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

答：單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載全部必須的 html, js, css。全部的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，仍是會分開寫（頁面片斷），而後在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用於pc端。

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

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

單頁面缺點：不利於seo；導航不可用，若是必定要導航須要自行實現前進、後退。（因爲是單頁面不能用瀏覽器的前進後退功能，因此須要本身創建堆棧管理）；初次加載時耗時多；頁面複雜度提升不少。

21.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 應該放到外層去。

22.assets和static的區別

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

不相同點：assets 中存放的靜態資源文件在項目打包時，也就是運行 npm run build 時會將 assets 中放置的靜態資源文件進行打包上傳，所謂打包簡單點能夠理解爲壓縮體積，代碼格式化。而壓縮後的靜態資源文件最終也都會放置在 static 文件中跟着 index.html 一同上傳至服務器。static 中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。由於避免了壓縮直接進行上傳，在打包時會提升必定的效率，可是 static 中的資源文件因爲沒有進行壓縮等操做，因此文件的體積也就相對於 assets 中打包後的文件提交較大點。在服務器中就會佔據更大的空間。

建議： 將項目中 template須要的樣式文件js文件等均可以放置在 assets 中，走打包這一流程。減小體積。而項目中引入的第三方的資源文件如iconfoont.css 等文件能夠放置在 static 中，由於這些引入的第三方文件已經通過處理，咱們再也不須要處理，直接上傳。

23.vue經常使用的修飾符

答：

• .stop：等同於 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
• .prevent ：等同於 JavaScript 中的 event.preventDefault() ，防止執行預設的行爲（若是事件可取消，則取消該事件，而不中止事件的進一步傳播）；
• .capture ：與事件冒泡的方向相反，事件捕獲由外到內；
• .self ：只會觸發本身範圍內的事件，不包含子元素；
• .once ：只會觸發一次。

24.vue的兩個核心點

答：數據驅動、組件系統

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

組件系統： 應用類UI能夠看做所有是由組件樹構成的。

25.vue和jQuery的區別

答：jQuery是使用選擇器（ $ ）選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的JavaScript的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。好比須要獲取label標籤的內容：$("lable").val(); ,它仍是依賴DOM元素的值。Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

26. 引進組件的步驟

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

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

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

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

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

29.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分發負責的活。

31.大家vue項目是打包了一個js文件，一個css文件，仍是有多個文件？

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

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

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

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

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

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

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

35.axios的特色有哪些

答：

從瀏覽器中建立XMLHttpRequests；

node.js建立http請求；

支持Promise API；

攔截請求和響應；

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

取消請求；

自動換成json。

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

params通常適用於get請求，data通常適用於post put 請求。

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

答：

1. 創建組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考1小時，碼碼10分鐘，程序猿的準則。) 　　
2. 準備好組件的數據輸入。即分析好邏輯，定好 props 裏面的數據、類型。　　
3. 準備好組件的數據輸出。即根據組件邏輯，作好要暴露出來的方法。　　
4. 封裝完畢了，直接調用便可

37.params和query的區別

答：用法：query要用path來引入，params要用name來引入，接收參數都是相似的，分別是 this.$route.query.name 和 this.$route.params.name 。url地址顯示：query更加相似於咱們ajax中get傳參，params則相似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示

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

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

答：使用vue開發時，在vue初始化以前，因爲 div 是不歸 vue 管的，因此咱們寫的代碼在尚未解析的狀況下會容易出現花屏現象，看到相似於 {{message}} 的字樣，雖然通常狀況下這個時間很短暫，可是咱們仍是有必要讓解決這個問題的。首先：在css里加上 [v-cloak] { display: none; } 。若是沒有完全解決問題，則在根元素加上 :

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

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

40.vue經常使用的UI組件庫

答：Mint UI，element，VUX

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

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

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

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

module.exports = {   publicPath: , // 相對於 HTML 頁面（目錄相同）    } 

生命週期函數面試題篇

### 42.什麼是 vue 生命週期？有什麼做用？

答：每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作 生命週期鉤子 的函數，這給了用戶在不一樣階段添加本身的代碼的機會。（ps：生命週期鉤子就是生命週期函數）例如，若是要經過某些插件操做DOM節點，如想在頁面渲染完後彈出廣告窗， 那咱們最先可在mounted 中進行。

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

答：beforeCreate， created， beforeMount， mounted

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

答：

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 ， 指令， 過濾器 ……都是處於不可用狀態。組件已經被銷燬了。

45.created和mounted的區別

答：created:在模板渲染成html前調用，即一般初始化某些屬性值，而後再渲染成視圖。mounted:在模板渲染成html後調用，一般是初始化頁面完成後，再對html的dom節點進行一些須要的操做。

46.vue獲取數據在哪一個周期函數

答：通常 created/beforeMount/mounted 皆可. 好比若是你要操做 DOM , 那確定 mounted 時候才能操做.

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

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

建立前/後： 在beforeCreated階段，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 路由面試題篇

48.mvvm 框架是什麼？

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

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

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

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

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

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

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

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

答：三種，

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

第二種： 組件內的鉤子

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

53. $route 和 $router 的區別

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

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

54.vue-router的兩種模式

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

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

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

答:三種方式

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

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

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

vuex常見面試題篇

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

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

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

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

57.vuex有哪幾種屬性？

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

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

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

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

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

modules => 模塊化Vuex

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

答：若是請求來的數據是否是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入vuex 的state裏。

若是被其餘地方複用，這個很大概率上是須要的，若是須要，請將請求放入action裏，方便複用。