Vue面試題

你要的Vue面試題都在這裏。

1. Vue.js介紹

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有很是容易上手的API；

Vue.js是一個構建數據驅動的Web界面的庫。

Vue.js是一套構建用戶界面的 漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和 Vue生態系統支持的庫開發的複雜單頁應用。數據驅動+組件化的前端開發。

簡而言之：Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是經過儘量簡單的 API實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。

2.什麼是 mvvm？

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層表明數據模型，也能夠在 Model 中定義數據修改和操做的業務邏輯；View 表明 UI 組件，它負責將數據模型轉化成 UI 展示出來，ViewModel 是一個同步 View 和 Model 的對象。

3.簡述Vue的響應式原理

當一個Vue實例建立時，vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉爲 getter/setter而且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。 每一個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。

4.Vue.js特色

簡潔：頁面由HTML模板+Json數據+Vue實例組成

數據驅動：自動計算屬性和追蹤依賴的模板表達式

組件化：用可複用、解耦的組件來構造頁面

輕量：代碼量小，不依賴其餘庫

快速：精確有效批量DOM更新

模板友好：可經過npm，bower等多種方式安裝，很容易融入

5.scss是什麼？

預處理css，把css當前函數編寫，定義變量,嵌套.

6.vue生命週期的理解？

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

建立前/後： 在 beforeCreate 階段，vue 實例的掛載元素 el 尚未。 載入前/後：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但仍是掛載以前爲虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。 更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。 銷燬前/後：在執行 destroy 方法後，對 data 的改變不會再觸發周期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，可是 dom 結構依然存在。

7.爲何vue中data必須是一個函數？

對象爲引用類型，當重用組件時，因爲數據對象都指向同一個data對象，當在一個組件中修改data時，其餘重用的組件中的data會同時被修改；而使用返回對象的函數，因爲每次返回的都是一個新對象（Object的實例），引用地址不一樣，則不會出現這個問題。

8.active-class是哪一個組件的屬性？嵌套路由怎麼定義？

vue-router模塊的router-link組件。

9.vue-router有哪幾種導航鉤子？

三種。

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

第二種：組件內的鉤子；

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

10.說出至少4種vue當中的指令和它的用法？

v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

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

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

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

assets文件夾是放靜態資源；

components是放組件；

router是定義路由相關的配置;

view視圖；

app.vue是一個應用主組件；

main.js是入口文件

13.計算屬性和watch的區別

在咱們運用vue的時候必定少不了用計算屬性computed和watch

computed計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板裏把數據綁定到一個計算屬性上時，Vue 會在其依賴的任何值致使該計算屬性改變時更新 DOM。這個功能很是強大，它可讓你的代碼更加聲明式、數據驅動而且易於維護。

watch監聽的是你定義的變量,當你定義的變量的值發生變化時，調用對應的方法。就好在div寫一個表達式name，data裏寫入num和lastname,firstname,在watch裏當num的值發生變化時，就會調用num的方法，方法裏面的形參對應的是num的新值和舊值，而計算屬性computed,計算的是Name依賴的值,它不能計算在data中已經定義過的變量。

14.prop 驗證，和默認值

咱們在父組件給子組件傳值得時候，爲了不沒必要要的錯誤，能夠給prop的值進行類型設定，讓父組件給子組件傳值得時候，更加準確，prop能夠傳一個數字，一個布爾值，一個數組，一個對象，以及一個對象的全部屬性。組件能夠爲 props 指定驗證要求。若是未指定驗證要求，Vue 會發出警告好比傳一個number類型的數據，用defalt設置它的默認值，若是驗證失敗的話就會發出警告。

props: {

visible: {

default: true,

type: Boolean,

required: true

},

},

複製代碼

15. vue 組件通訊

父傳遞子

父：自定義屬性名 + 數據（要傳遞）=> :value="數據"

子：props ["父組件上的自定義屬性名「] =>進行數據接收)

子傳遞父

在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。

子：this.$emit('自定義事件名稱', 數據) 子組件標籤上綁定@自定義事件名稱='回調函數'

父：methods: {自定義事件() {//邏輯處理} }

兄弟組件

經過中央通訊 let bus = new Vue()

A：methods :{ 函數{bus.$emit('自定義事件名'，數據)} 發送

B：created （）{bus.$on('A發送過來的自定義事件名'，函數)} 進行數據接收

16.vue路由傳參數

1.使用query方法傳入的參數使用this.$route.query接受

2.使用params方式傳入的參數使用this.$route.params接受

17.vuex 是什麼？ 有哪幾種屬性？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。

有 5 種，分別是 state、getter、mutation、action、module

vuex 的 store 是什麼？

vuex 就是一個倉庫，倉庫裏放了不少對象。其中 state 就是數據源存放地，對應於通常 vue 對象裏面的 datastate 裏面存放的數據是響應式的，vue 組件從 store 讀取數據，如果 store 中的數據發生改變，依賴這相數據的組件也會發生更新它經過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性

vuex 的 getter 是什麼？

getter 能夠對 state 進行計算操做，它就是 store 的計算屬性雖然在組件內也能夠作計算屬性，可是 getters 能夠在多給件之間複用若是一個狀態只在一個組件內使用，是能夠不用 getters

vuex 的 mutation 是什麼？

更改Vuex的store中的狀態的惟一方法是提交mutation

vuex 的 action 是什麼？

action 相似於 muation, 不一樣在於：action 提交的是 mutation,而不是直接變動狀態action 能夠包含任意異步操做 vue 中 ajax 請求代碼應該寫在組件的 methods 中仍是 vuex 的 action 中

vuex 的 module 是什麼？

面對複雜的應用程序，當管理的狀態比較多時；咱們須要將vuex的store對象分割成模塊(modules)。

若是請求來的數據不是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入 vuex 的 state 裏若是被其餘地方複用，請將請求放入 action 裏，方便複用，幷包裝成 promise 返回

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

v-show指令是經過修改元素的displayCSS屬性讓其顯示或者隱藏

v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

19.如何讓CSS只在當前組件中起做用？

將當前組件的<style>修改成<style scoped>

20.

的做用是什麼？

<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染。 大白話: 好比有一個列表和一個詳情，那麼用戶就會常常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那麼就能夠對列表組件使用<keep-alive></keep-alive>進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是從新渲染

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

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

var a=[1,2,3,4]

var b=[1,2,3,4]

delete a[1]

console.log(a) //[empty,2,3,4]

this.$delete(b,1)

console.log(b) //[2,3,4]

複製代碼

22.$nextTick是什麼？

vue實現響應式並非數據發生變化後dom當即變化，而是按照必定的策略來進行dom更新。

$nextTick 是在下次 DOM 更新循環結束以後執行延遲迴調，在修改數據以後使用 $nextTick，則能夠在回調中獲取更新後的 DOM

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

能夠。

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

複製代碼

24.v-on 經常使用修飾符

.stop 該修飾符將阻止事件向上冒泡。同理於調用 event.stopPropagation() 方法

.prevent 該修飾符會阻止當前事件的默認行爲。同理於調用 event.preventDefault() 方法

.self 該指令只當事件是從事件綁定的元素自己觸發時才觸發回調

.once 該修飾符表示綁定的事件只會被觸發一次

25.v-for key的做用。

當Vue用 v-for 正在更新已渲染過的元素列表是，它默認用「就地複用」策略。若是數據項的順序被改變，Vue將不是移動DOM元素來匹配數據項的改變，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。 爲了給Vue一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性。key屬性的類型只能爲 string或者number類型。

key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。

26.v-for 與 v-if 的優先級

v-for比v-if優先，若是每一次都須要遍歷整個數組，將會影響速度，尤爲是當之須要渲染很小一部分的時候。

27.Vue子組件調用父組件的方法

第一種方法是直接在子組件中經過this.$parent.event來調用父組件的方法

第二種方法是在子組件裏用$emit向父組件觸發一個事件，父組件監聽這個事件就好了。

28.Promise對象是什麼？

1.Promise是異步編程的一種解決方案，它是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。promise對象是一個構造函數，用來生成Promise實例；

2.promise的兩個特色 對象狀態不受外界影響 && 一旦狀態改變，就不會再變，任什麼時候候均可以獲得結果（pending狀態-->fulfilled || pending-->rejected）

29.axios的特色有哪些？

一、axios是一個基於promise的HTTP庫，支持promise的全部API；

二、它能夠攔截請求和響應；

三、它能夠轉換請求數據和響應數據，並對響應回來的內容自動轉換爲json類型的數據；

四、它安全性更高，客戶端支持防護XSRF；

30.vue中的 ref 是什麼？

ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例。

31.Vue的路由模式,實現方式？

hash模式 和 history模式

hash模式：在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取； 特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面。 hash 模式下:僅 hash 符號以前的內容會被包含在請求中，如 www.xxx.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。

history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。

history 模式:前端的 URL 必須和實際向後端發起請求的 URL 一致，如 www.xxx.com/items/id。後端若是缺乏對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裏如此描述：「不過這種模式要玩好，還須要後臺配置支持……因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。」

32.$route和$router的區別？

$route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。

$router是'路由實例'對象包括了路由的跳轉方法，鉤子函數等。

33.vue.js的兩個核心是什麼？

數據驅動、組件系統

34.vue如何兼容ie的問題。

babel-polyfill插件

35.頁面刷新vuex被清空解決辦法？

1.localStorage 存儲到本地再回去

2.從新獲取接口獲取數據

36.如何優化SPA應用的首屏加載速度慢的問題？

1.將公用的JS庫經過script標籤外部引入，減少 app.bundel 的大小，讓瀏覽器並行下載資源文件，提升下載速度；

2.在配置 路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調用某個組件時再加載對應的js文件；

3.加一個首屏loading圖，提高用戶體驗；

37.Vue 改變數組觸發視圖更新

如下方法調用會改變原始數組：push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value )

調用方法：Vue.set( target, key, value )

target：要更改的數據源(能夠是對象或者數組)

key：要更改的具體數據

value ：從新賦的值

複製代碼

38.DOM 渲染在哪一個週期中就已經完成？

mounted

注意 mounted 不會承諾全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠用 vm.$nextTick 替換掉 mounted

mounted: function () {

this.$nextTick(function () {

// Code that will run only after the

// entire view has been rendered

})

}

複製代碼

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

beforecreate : 能夠在這加個loading事件，在加載實例時觸發

created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用

mounted : 掛載元素，獲取到DOM節點 updated : 若是對數據統一處理，在這裏寫上相應函數

beforeDestroy : 能夠作一個確認中止事件的確認框

40.第一次加載會觸發哪幾個鉤子？

會觸發beforeCreate , created ,beforeMount ,mounted

41.動態綁定class

active classname， isActive 變量

<div v-bind:class="{ active: isActive }"></div>

vue是一套構建用戶界面的漸進式框架，在前端工做中，是很是廣泛的一種框架了。

所以，在前端面試的時候，vue的面試題也頻頻出現，珠峯培訓老師總結了2018年常見的vue面試題，但願能幫助到你們。

vue-cli工程

一、構建的 vue-cli 工程都到了哪些技術，它們的做用分別是什麼？

vue-router vuex aioxs

二、vue-cli 工程經常使用的 npm 命令有哪些？

npm install npm run dev npm build

三、請說出vue-cli工程中每一個文件夾和文件的用處

四、config文件夾 下 index.js 的對於工程 開發環境 和 生產環境 的配置

五、請你詳細介紹一些 package.json 裏面的配置

vue核心知識點

一、vue.js的兩個核心是什麼？

數據驅動和組件化思想

二、請說出vue幾種經常使用的指令

v-for v-if v-else v-show v-bind

三、請問 v-if 和 v-show 有什麼區別

1. v-hsow和v-if的區別： v-show是css切換，v-if是完整的銷燬和從新建立。
2. 使用 頻繁切換時用v-show，運行時較少改變時用v-if
3. v-if=‘false’ v-if是條件渲染，當false的時候不會渲染

四、vue經常使用的修飾符

.stop .prevent .once .sync

五、v-on能夠監聽多個方法嗎？

能夠

六、vue中 key 值的做用

更高效的更新虛擬DOM

七、vue中子組件調用父組件的方法

Props

子組件裏用$emit向父組件觸發一個事件，你組件監聽這個事件就好了

八、vue中 keep-alive 組件的做用

用於保留組件狀態和避免從新渲染

九、vue中如何編寫可複用的組件？

把複用的組件獨立建一個文件

十、什麼是vue生命週期和生命週期鉤子函數？

十一、vue生命週期鉤子函數有哪些？

十二、vue如何監聽鍵盤事件中的按鍵？keyup

1三、vue更新數組時觸發視圖更新的方法updata

1四、vue中對象更改檢測的注意事項

1六、vue-cli工做中如何自定義一個過濾器？

1七、vue等單頁面應用及其優缺點

1八、什麼是vue的計算屬性？

computed

1九、vue-cli提供的幾種腳手架模板

browserify和webpack

20、vue父組件如何向子組件中傳遞數據？

經過props屬性傳遞

2一、vue-cli工程升級vue版本

npm update vue --save

2二、vue-cli中如何使用組件的繼承-mixin？

2三、vue-cli中新增自定義指令

vue.directive()

2四、vue-cli開發環境如何使用全局常量？

2五、 vue-cli生產環境如何使用全局常量?

2六、vue-cli中如何自定義事件?

this.$emit('myEvent')

v-on:my-event='dosomething'

vue-router

一、vue-router如何響應 路由參數 的變化？

二、完整的 vue-router 導航解析流程

三、vue-router有哪幾種導航鉤子（ 導航守衛 ）？

四、vue-router的幾種實例方法以及參數傳遞

五、vue-router的動態路由匹配以及使用

六、vue-router如何定義嵌套路由？

七、<router-link></router-link>組件及其屬性

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

按需加載模塊 const foo=()=>{import('/foo')}

九、vue-router路由的兩種模式

hash模式和h5的history.pushState

十、history路由模式與後臺的配合

vuex

一、什麼是vuex？

vue框架中資源管理

二、使用vuex的核心概念

集中式管理應用的全部組件的狀態

三、vuex在vue-cli中的應用

四、組件中使用 vuex 的值和修改值的地方？

http請求

一、Promise對象是什麼？

Promise是ES6的內置類，用來管理異步操做

二、axios、fetch與ajax有什麼區別？

axios：封裝的XHR，支持Promise方式，從Node.js建立http請求，提供一些併發請求接口

fetch：脫離了XHR是ES規範裏新的實現方式，更加底層，提供的API豐富

ajax：基於原生的XHR開發的，針對MVC的編程，不符合如今前端的MVVM的浪潮

三、什麼是JS的同源策略和跨域問題？

四、如何解決跨域問題？

五、vue-cli中如何使用JSON數據模擬？

六、vue-cli中http請求的統一管理。

UI樣式

一、.vue組件的scoped屬性的做用

Css文件上加scoped, 只在當前VUE組件有做用

二、如何讓CSS只在當前組件中起做用？【建議】

Css文件上加scoped

三、vue中集成的UI組件庫

element-ul mini-ul

四、如何適配移動端？【 經典 】

rem

五、移動端經常使用媒體查詢的使用

@media

經常使用功能

一、vue中如何實現tab切換功能？

設置屬性isShow，控制v-show的值

二、vue中如何利用 keep-alive 標籤實現某個組件緩存功能？

用keep-alive包括起來

三、vue中實現切換頁面時爲左滑出效果

監聽：Watch：$route(to,from)

切換頁面時設置：name屬性

transition :name=slide-left

四、vue-cli中的統一事件管理機制

VUEX

混合開發

一、vue如何調用 原生app 提供的方法？

二、原生app 調用 vue 提供的方法，並將值傳遞到 .vue 組件中

生產環境部署

一、vue打包命令是什麼？

npm yarn cnpm

二、vue打包後會生成哪些文件？

build

三、如何配置 vue 打包生成文件的路徑？

四、vue如何優化首屏加載速度？

MVVM設計模式

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層表明數據模型，也能夠在 Model 中定義數據修改和操做的業務邏輯；View 表明 UI 組件，它負責將數據模型轉化成 UI 展示出來，ViewModel 是一個同步 View 和 Model 的對象。

做者：化身孤島的鯨_

連接： juejin.im/post/5d1343…

來源：掘金

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

一、MVC、MVP與MVVM模式

MVVM：model+view+viewModel框架，數據模型：model+viewmodel

MVC：model+view+controller

MVP:model+view+presenter

二、MVC、MVP與MVVM的區別

三、常見的實現MVVM幾種方式

四、實現一個本身的MVVM（原理剖析）

源碼剖析

一、vue內部與運行機制

二、vue-router源碼解析

三、vuex工做原理詳解

四、axios內部設計分析

深刻拓展

一、vue開發命令 npm run dev 輸入後的執行過程

二、MVC、MVP與MVVM模式

三、MVVM模式的優勢以及與MVC模式的區別

四、vue的服務器端渲染

五、vue高版本中一些新特性的實踐

六、從零寫一個npm安裝包

七、vue-cli中經常使用到的加載器