vue el-checkbox循環多個如何選中目前的_58 道 Vue 常見面試題集錦，涵蓋入門到精通，自測 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 是 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可以監聽多個方法嗎？

答：可以，栗子：。

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對象，對其進行指派、取值、事件綁定等操作，其實和原生的HTML的差別隻在于可以更友善的選取和操作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; } 。如果沒有徹底解決問題，則在根元素加上 style="display: none;" :style="{display: 'block'}"

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裡，友善複用。

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