看看試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背后的原理，這樣面試的時候才能侃侃而談。不讓稍微有水平的面試官一看就能看出，是否真才實學還是剛好背中了這道題。
（都是一些基礎的vue面試題，大神不用浪費時間往下看）
一、對于MVVM的理解？
MVVM 是Model - View - ViewModel 的縮寫
Model 代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯。
View 代表UI組件，它負責將數據模型轉化成UI 展現出來。
ViewModel 監聽模型數據的改變和控制試圖行為、處理用戶交互、簡單理解就是一個同步View和Model的對象，連接Model和View。
在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行交互，model 和 ViewModel 之間的交互是雙向的，因此View 數據的變化會同步到Model 中，而Model數據的變化也會立即反應到View上。
** ViewModel** 通過雙向數據綁定把View 層和model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM，不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由MVVM 來統一管理。
二、Vue的生命周期
三、Vue 實現數據雙向綁定的原理：Object.defineProperty()
vue實現數據雙向綁定主要是：采用 數據劫持結合發布者-訂閱者模式 的方式，通過 Object.defineProperty() 來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應監聽回掉。當把一個普通 JavaScript 對象傳給Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用Object.defineProperty 將他們轉為 getter/setter。用戶看不到getter / setter ，但是在內部它們讓vue追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合Observer，Complie 和 Watcher三者，通過Observer來監聽自己的model的數據變化，通過Complie來解析編譯模板指令(vue中是用來解析 {{ }} ），最終利用watcher搭起observer和complie之間的通信橋梁，達到數據變化 ==》 視圖更新，視圖交互變化（input）==》 數據model變更雙向綁定效果。
js實現簡單的雙向綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {};
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue;
document.getElementById('show').innerHTML = newValue;
}
})
document.addEventListener('keyup', function (ev) {
obj.txt = ev.target.value;
})
</script>
四、Vue 組件間的參數傳遞
1.父組件與子組件傳值
父組件傳給子組件： 子組件通過props方法接受數據；
子組件傳給父組件：$emit方法傳遞參數;
2.非父子組件間的數據傳遞，兄弟組件傳值
EventBus，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接受事件，項目比較小時，用這個比較合適；
VueX，創建一個數據倉庫，整個項目全局都可以往這個倉庫存放數據和讀取數據
五、Vue的路由實現：hash模式 和 history模式
hash模式： 在瀏覽器中符號 “#” 以及#后面的字符稱之為hash，用window.location.hash讀取；
特點：hash雖然在URL中，但不被包括在HTTP請求中，用來指導瀏覽器動作，對服務端安全無用，hash不會重新加載頁面。
history模式：history 采用HTML5的新特性；且提供了兩個新方法：pushState（）、replaceState（）可以對瀏覽器歷史紀錄棧進行修改，以及popState事件監聽到狀態變更。
六、 Vue與Angular以及React的區別？
（版本不斷更新，以下區別有可能不是很正確，我的工作中只用到vue，對angular和react不怎么熟）
1.與AngularJs的區別
相同點：都支持指令，內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定，都不支持低端瀏覽器；
不同點：AngularJs的學習成本高，比如Dependency、Injecttion特性，而vue.js本身提供的API都比較簡單、直觀；在性能上，AngularJs依賴對數據做臟檢查，所以watcher越多越慢；Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新，所以的數據都是獨立觸發的。
2. 與React的區別
相同點：
React采用獨特的JSX語法，Vue.js 在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯后使用;中心實現相同：一切都是組件，組件實例之間可以嵌套；都提供合理的鉤子函數，可以讓開發者定制化底去處理需求，都不內置列數Ajax，Route等功能到核心包，而是以插件的方式加載;在組件開發中都支持mixins的特性了；
不同點：
React采用Virtual DOM會對渲染出來的結果做臟檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷的操作Virtual DOM。
七、Vue路由的鉤子函數
首頁可以控制導航跳轉，beforeEach，afterEach等。一般用于頁面title的修改，一些需要登錄才能調整頁面重定向功能。
beforeEach 主要的3個參數to，from，next；
to : route即將進入的目標路由對象、
from： route當前導航正要離開的路由、
next： function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉
八、Vuex是什么？怎么使用？那種功能場景使用它？
只要來讀取的狀態集中放在store中；改變狀態的方式就是提交mutations。這是個同步的實物；異步邏輯應該封裝中action中。
在main.js引入store，注入。新建一個目錄store，...export。
場景有： 單頁面應用，組件之間的狀態，音樂播放，登錄狀態，加入購物車
state
Vuex 使用單一狀態樹，既每個應用將僅僅包含一個store實例，單單一狀態樹和模塊化并不沖突。存放的數據狀態，不可以直接修改里面的數據。
mutations
mutations定義的方法動態修改Vuex的store中的狀態或數據。
getters
類似vue的計算屬性，主要用來過濾一些數據。
action
action可以理解為通過mutations里面處理數據的方法變成可異步的處理數據的方法，簡單的說就是異步操作數據。view層通過store.dispath來分配action。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit('increment')
}
}
})
modeules
項目特別復雜的時候，可以讓每一個模塊擁有自己的state，mutation，action，getters，使得結構非常清晰，方便管理
const modulesA = {
state: { ... },
mutations: { ... },
actions: { ... }
}
}
const modulesB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
}
const store = new Vuex.store({
modules: {
a: modulesA,
b: modulesB
}
})
九、對Keep-Alive的了解？
keep-alive 是Vue內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
在vue 2.1.0的版本之后，keep-alive新加入了兩個屬性： include( 包含的組件緩存）與exclude(排除的組件不緩存，優先級大于include）
使用方法
<keep-alive include="inclde_components" exclude="exclude_components">
<component>
<!-- 該組件是否緩存取決與include 和 exclude 屬性-->
</component>
</keep-alive>
參數解釋
include -- 字符串或者正則表達式，只要名稱匹配的組件會被緩存
exclude -- 字符串或者正則表達式，任何名稱匹配的組件都不被緩存
include 和exclude 的屬性允許組件有條件的緩存。而這都可以用 " , " 分割字符串、正則表達式、數組。單使用正則或者是數組是，要記得用 v-bind
示例
<!-- 逗號分隔字符串，只有組件a與b被緩存。 -->
<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>
