你要的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> 包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染。 大白話: 好比有一個列表和一個詳情，那麼用戶就會常常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那麼就能夠對列表組件使用<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[0]
console.log(a)  //[empty,2,3,4]
this.$delete(b,0)
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 符號以前的內容會被包含在請求中，如 http://www.xxx.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。
history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。
history 模式:前端的 URL 必須和實際向後端發起請求的 URL 一致，如 http://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>
複製代碼

---

本文主要是一些基礎知識。但願能幫助那些即將或正在找工做的同行們。加油~~~ 若是你以爲有用 請幫忙點點贊呦~~~