傳送門 → vue 常見面試題 （二）
1、Vue中key值的作用？
vue中列表循環需加:key="唯一標識"。唯一標識可以是item裏面id index等，因爲vue組件高度複用增加Key可以標識組件的唯一性，爲了更好地區別各個組件 key的作用 主要是爲了高效的更新虛擬DOM 。
key可以管理可複用的元素，減少不必要的元素的重新渲染,也要讓必要的元素能夠重新渲染。
有相同父元素的子元素必須有獨特的key。重複的key會造成渲染錯誤。
2、Vue單頁面應用及其優缺點？
概念：
單頁面應用（SPA）
通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。
多頁面（MPA）
就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新。
單頁面優缺點：
優點：
1、用戶體驗好，快，內容的改變不需要重新加載整個頁面，對服務器壓力較小。
2、前後端分離，比如vue項目
3、完全的前端組件化，前端開發不再以頁面爲單位，更多地採用組件化的思想，代碼結構和組織方式更加規範化，便於修改和調整；
缺點：
1、首次加載頁面的時候需要加載大量的靜態資源，這個加載時間相對比較長。
2、不利於 SEO優化，單頁頁面，數據在前端渲染，就意味着沒有 SEO。
3、頁面導航不可用，如果一定要導航需要自行實現前進、後退。
3、對於v-show和v-if指令的理解?
相同點：
v-if與v-show均能控制元素的顯示和隱藏
不同點：
1.本質： v-show本質就是通過設置css中的display屬性來控制元素的顯示與隱藏，v-if是在DOM樹上進行動態的添加、刪除元素
2. 編譯區別 ：v-show是對css樣式的修改。v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷燬和重建內部的事件監聽和子組件。
3. 編譯條件： v-show都會編譯，初始值爲false，只是將display設爲none，但它也編譯了。v-if是惰性的，當初始值爲false，就不會編譯了。
4. 性能：v-show只編譯一次，後面其實就是控制css，而v-if不停的銷燬和創建，故v-show性能更好一點。
總結：如果要頻繁切換某節點時，使用v-show（無論true或者false初始都會進行渲染，此後通過css來控制顯示隱藏，因此切換開銷比較小，初始開銷較大），如果不需要頻繁切換某節點時，使用v-if（因爲懶加載，初始爲false時，不會渲染，但是因爲它是通過添加和刪除dom元素來控制顯示和隱藏的，因此初始渲染開銷較小，切換開銷比較大）
4、Vue組件傳參
傳送門，我自己寫的一篇博客 → 組件傳參
- 使用props和$emit
- 使用ref
- 使用eventBus
- 使用狀態管理Vuex
5、Vuex是什麼？說一下你對vuex的理解?
這是一篇關於 Vuex 的一篇博文，推薦大家去看一下。
Vuex是vue的狀態管理模式。
變狀態的方式是提交mutations。
state
Vuex 使用單一狀態樹,即每個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不可以直接修改裏面的數據。
mutations
mutations定義的方法動態修改Vuex 的 store 中的狀態或數據。
getters
類似vue的計算屬性，主要用來過濾一些數據。
action
actions可以理解爲通過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操作數據。view 層通過 store.dispath 來分發 action。
modules
項目特別複雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。
6、Vue的生命週期
beforeCreate（創建前） 在數據觀測和初始化事件還未開始
created（創建後） 完成數據觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來。 此時是最早可進行發送ajax請求的生命週期，也可進行服務端渲染
beforeMount（載入前） 在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入後） 在el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前） 在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後） 在由於數據更改導致的虛擬DOM重新渲染和打補丁之後調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因爲這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。
beforeDestroy（銷燬前） 在實例銷燬之前調用。實例仍然完全可用。
destroyed（銷燬後） 在實例銷燬之後調用。調用後，所有的事件監聽器會被移除，所有的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。
7、Vue實現數據雙向綁定的原理
vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式。
Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數據雙向綁定 將MVVM作爲數據綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變更雙向綁定效果。
8、Vue的路由實現：hash模式 和 history模式
關於vue的路由，我寫過一篇博客，詳細的解釋了底層的原理 傳送門 → vue-router 底層原理
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 一致
9、vue路由的鉤子函數
首頁可以控制導航跳轉，beforeEach，afterEach等，一般用於頁面title的修改。一些需要登錄才能調整頁面的重定向功能。
beforeEach主要有3個參數to，from，next：
to：route即將進入的目標路由對象，
from：route當前導航正要離開的路由
next：function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉。
10、對keep-alive 的瞭解？
這是一篇關於 keep-alive 的博客，可以去看一下
keep-alive是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
在vue 2.1.0 版本之後，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大於include) 。
參數解釋
include- 字符串或正則表達式，只有名稱匹配的組件會被緩存
exclude- 字符串或正則表達式，任何名稱匹配的組件都不會被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達式、數組。當使用正則或者是數組時，要記得使用v-bind 。
11、Vue中引入組件的步驟?
1.採用ES6的import … from …語法
或
CommonJS的require()方法引入組件
2.對組件進行註冊,代碼如下
註冊
Vue.component('my-component',
{ template: '<div>A custom component!</div>'})
3.使用組件
<my-component></my-component>
12、在Vue中使用插件的步驟
1.
import Vue from 'vue'
2.
import 組件 from '組件包名'
3.
Vue.use(組件)
13、vue watch的高級用法–監聽對象的屬性變化
1.監聽對象需要深度監聽 ,如下代碼可以監聽整個msg對象的變化
watch: {
msg: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
2.監聽對象裏面某個屬性的變化，通過computed做中間層實現
computed: {
channel() {
return this.msg.channel
}
},
watch:{
channel(newValue, oldValue) {
console.log('new: %s, old: %s', newval, oldVal)
//這裏面可以執行一旦監聽的值發生變化你想做的操作
}
}
14、active-class是哪個組件的屬性？
active-class是vue-router模塊的router-link組件中的屬性，用來做選中樣式的切換；
使用方法：
<router-link to="/" active-class="active">首頁</router-link>
需要注意的是，active-class選擇樣式時根據路由中的路徑去匹配，然後顯示，例如在my頁面中，路由爲 ，那麼to="/”和to="/my"都可以匹配到，所有都會激活選中樣式,要解決問題方式,通過加入一個exact屬性
<router-link to="/" active-class="active" exact>首頁</router-link>