前言：一句話就能回答的VUE面試題
vue中$emit事件無法觸發？
emit裏的事件名不要用大寫字母；
渲染的時候key給什麼值，可以使用index嗎，用id好還是index好？
當我們在使用v-for進行渲染時，儘可能使用渲染元素自身屬性的id給渲染的元素綁定一個key值，這樣在當前渲染元素的DOM結構發生變化時，能夠單獨響應該元素而不觸發所有元素的渲染。
1.css只在當前組件起作用
答：在style標籤中寫入scoped例如：<style scoped></style>
2.v-if 和 v-show 區別
答：v-if按照條件是否渲染，v-show是display的block或none；
3.$route和$router的區別
答：$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等。
4.vue.js的兩個核心是什麼？
答：數據驅動、組件系統
5.vue幾種常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else
6.vue常用的修飾符？
答：.prevent: 提交事件不再重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素本身而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用
7.v-on 可以綁定多個方法嗎？
答：可以
8.vue中 key 值的作用？
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地複用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是爲了高效的更新虛擬DOM。
9.什麼是vue的計算屬性？
答：在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對數據進行復雜處理，且可能多次使用的情況下，儘量採取計算屬性的方式。
好處：①使得數據處理結構清晰；②依賴於數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名即可；⑤常用的是getter方法，獲取數據，也可以使用set方法改變數據；⑥相較於methods，不管依賴的數據變不變，methods都會重新計算，但是依賴數據不變的時候computed從緩存中獲取，不會重新計算。
10.vue等單頁面應用及其優缺點
答：優點：Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、後退。。
一：v-show和v-if有什麼區別？
1：v-if通過添加或刪除dom元素，v-show是通過控制css樣式display來顯示和隱藏；
2：v-if在有一個局部的編譯/卸載的過程，切換過程中合適的銷燬和重構內部事件、組件‘；v-show只是簡單地css的切換；
3：v-if是惰性的；如果初始條件爲假，什麼也不做。只有條件第一次爲真的時候纔開始局部編譯；v-show在任何條件下可以編譯，然後被緩存，保留DOM元素；
4：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
5：v-if適合運營條件不大可能改變；v-show適合頻繁切換；
二：vue中MVVM模式是怎麼樣的？
1：model View Viewmodel 的縮寫；
model代表數據模型；
view 代表視圖；
Viewmodel代表：監聽數據本模型的改變和視圖的變化，處理用戶交互，簡單的理解鏈接view 和model；
2：viewmodel通過雙向數據綁定把view和model聯繫起來了；不需要手動的操作dom；維護複雜的數據只需要mvvm就可以了；
三：什麼是雙向數據綁定；
1：vue實現雙向數據綁定主要是通過：數據劫持結合發佈者-訂閱者的方式；通過defidended-property()方法來劫持每個屬性的setter、getter，數據變動時發佈給訂閱者，觸發相應的回調。把一個普通的js對象傳給VUE實例來作爲他的data選項時候，vue實例遍歷它的屬性用Object.definedproperty將他們轉換成setter、gettter；但是內部VUE追蹤依賴，當屬性訪問和修改時通知變化；
vue的雙向數據綁定將mvvm作爲入口，整合Observer、complie，watcher，三者，通過Observerl監聽model的改變，通過compile來編譯模板指令，最終利用watcher 搭起observer和compile之間的橋樑；達到數據變化，視圖更新；視圖變化，達到改變model變化；
四：vue生命週期；
從創建到銷燬的過程，稱爲生命週期；
作用：生命週期中有很多鉤子，能夠利用鉤子事件控制整個vue實例過程中更容易形成好的邏輯；
第一次加載觸發哪幾個鉤子：
beforeCreate created beforeMounted Mounted
DOM渲染在mounted中渲染完成；
1>：創建前/後
2>：掛載前/後
3>：更新前/後
4>：銷燬錢/後
4.1：Vue 的父組件和子組件生命週期鉤子函數執行順序？
Vue 的父組件和子組件生命週期鉤子函數執行順序可以歸類爲以下 4 部分：
- 加載渲染過程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
- 子組件更新過程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
- 父組件更新過程
父 beforeUpdate -> 父 updated
- 銷燬過程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
五：VUE組件之間的傳值
1：父組件向子組件傳值：父組件中引入子組件，父組件定義要傳的值，子組件通過定義Prop來接收傳值，
2：子組件向父組件傳值：在父組件中定義一個方法接收子組件傳值，在子組件中定義一個觸發事件，通過$emit發射給子組件。
組件之間的傳值：當項目比較小的時候，使用中心
3：兄弟組件之間的傳值
1>：兄弟組件之間的傳值需要藉助事件車；
2>：穿件一個VUE實例，讓兄弟兩個公用一個事件機制；
3>：數據傳遞方：使用Bus.$emit(方法名，傳遞數據)
數據接收方：通過mounted(){}觸發Bus.$on(方法名，Function(接收數據的參數){})
六：Vue路由鉤子函數；
首頁可以控制導航跳轉，beforeEach afterEach 等，一般用於修改頁面跳轉。
beforeEach(from ,to,next){}
to:route即將進入的目標路由；
from:route即將離開的路由；
next:function一定調用該方法，resolve這個鉤子，執行效果依賴next的參數，可以控制網頁跳轉；
七：VUEX是什麼，怎麼使用，哪些場景可以使用；
1：vue單頁面組件的開發中的全局狀態管理。簡單的理解就是在store.js中定義一個數據之後，在全局任何一個組件中都可以獲取，修改，並且修改之後立刻能夠更新到全局。
1>:state:讀取狀態數據都保存在state中，是store中的唯一數據源；
// 定義 new Vuex.Store({ state: { allProducts: [] } //... }) // 組件中獲取 this.$store.state.allProducts
2>:moutation：改變state中數據的唯一途徑，不能處理異步數據。（重點）
mutations: { setProducts (state, products) { state.allProducts = products } } // 組件中使用 this.$store.commit('setProducts', {//..options})
3>:getters：和vue中的computed 類似，屬於計算屬性，基於state第二次包裝，常用於多個數據的篩選和相關計算；
getters: { cartProducts(state, getters, rootState) => (getters.allProducts.filter(p => p.quantity)) } // 組件中獲取 this.$store.getters.cartProducts
4>:actions：類似moutation，用於提交matation中狀態的改變，但是他不能直接改變moutation中的值；可以包含異步操作；
// 定義（shop爲api） actions: { getAllProducts ({ commit }, payload) { shop.getProducts((res) => { commit('setProducts', res) }) } } // 組件中使用 this.$store.dispatch('getAllProducts', {//..payload})
5>:modules：類似於命名空間，將各個組件之間的變量分開操作和定義，便於維護
// 定義 const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) // 組件中使用 store.state.a // -> moduleA 的狀態 store.state.b // -> moduleB 的狀態
八：VUE-cli如何新增自定義指令；
1.創建局部指令
var app = New Vue({ el:'#app', data:{} //創建指令，可以多個 directives() { inserted(el) { // 指令中第一個參數是當前使用指令的DOM console.log(el); console.log(arguments); // 對DOM進行操作 el.style.width = '200px'; el.style.height = '200px'; el.style.background = '#000'; } } })
2:全局指令
directive（dir2，{ innserted(el){ console.log(el); } }）
3:指令的使用
<div id="app"> <div v-dir1></div> <div v-dir2></div> </div>
九：VU如何定義一個過濾器；
1：html代碼：
<div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }} </div>
2：JS代碼；
var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
3：定義全局過濾：
vue.filter('capitalize:': ,{function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
過濾器接收表達式的值 (msg) 作爲第一個參數。capitalize 過濾器將會收到 msg的值作爲第一個參數。
十：對VUEkeep-live 的理解？
keep-alive是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
在vue 2.1.0 版本之後，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大於include)
<keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 該組件是否緩存取決於include和exclude屬性 --> </component> </keep-alive>
參數解釋
include - 字符串或正則表達式，只有名稱匹配的組件會被緩存
exclude - 字符串或正則表達式，任何名稱匹配的組件都不會被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達式、數組。當使用正則或者是數組時，要記得使用v-bind 。
<keep-alive include="a,b"> <component></component> </keep-alive> <!-- 正則表達式 (需要使用 v-bind，符合匹配規則的都會被緩存) --> <keep-alive :include="/a|b/"> <component></component> </keep-alive> <!-- Array (需要使用 v-bind，被包含的都會被緩存) --> <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>
阿龍學堂整理髮布：www.alongxuetang.com