馬上要面試，這里記錄一下Vue的基礎面試題，手寫一遍加深理解，大神不用浪費時間往下看了
一、對於MVVM的理解
MVVM是MOdel-View-ViewModel的縮寫
Model代表數據模型，可以在Model中定義數據修改和操作的業務邏輯
View代表UI組件，負責將數據模型轉化為UI展現出來
ViewModel負責監聽數據模型的改變和控制視圖行為，處理用戶交互；是一個同步Model和View的對象，連接Model和View。
在MVVM架構下，view和Model之間並沒有直接的聯系，而是通過ViewModel進行交互,
Model與ViewModel之間的交互式雙向的，因此View數據的變化會同步到Model中，而Model中的數據變化也會立即反應到View上
ViewModel通過雙向數據綁定將View層和Model層連接了起來，而View層與Model的同步是完全自動的無需認為干涉，因此開發者只需要關注業務邏輯，不需要手動操作DOM；
不需要關注數據狀態的同步問題，復雜的數據狀態維護完全有MVVM來統一管理。
二、Vue的生命周期
beforeCreate: 實例創建之前，在數據觀測，初始化事件還未開始
created： 實例創建完成，完成數據觀測，屬性和方法的運算，初始化事件，此時$el還沒有顯示出來，可以訪問到data，computed，methods，watch
beforeMount：在掛載之前被調用，相關的render函數首次被調用。編譯模板，把data里面的數據和模板生成html，還沒有掛載到Dom上
Mounted：在el被新創建的vm.$el替換，並掛載到實例上后調用。實例掛載在Dom上，此時可以通過Dom的api獲取dom節點，$el可以被訪問了
beforeUpdate： 響應數據更新時調用，發生在虛擬dom打補丁之前
Updated：虛擬dom重新渲染或打補丁之后調用，dom已經更新，可以進行依賴於dom的操作
beforeDestroy：實例銷毀之前調用，此時組件完全可用，可以通過this獲取實例
destroyed：實例銷毀后調用
1.什么是Vue生命周期
Vue實例從創建到銷毀的過程，就是生命周期；從開始創建、初始化數據、編譯模板、掛載dom-->渲染、更新、更新渲染、銷毀等一系列過程，稱之為Vue的生命周期
2.vue生命周期的作用？
生命周期中有多個事件鈎子，有利於我們控制整個vue實例的過程，形成更好的邏輯
3.vue生命周期分為幾個階段
8個階段分別是：創建前、創建后，掛載前，掛載后、更新前、更新后、銷毀前、銷毀后
4.Dom渲染在哪個鈎子中就已經完成了？
mounted
三、Vue實現數據雙向綁定的原理（Object.defineProperty）
vue主要采用數據劫持結合發布訂閱者模式實現數據雙向綁定，通過Object.defineproperty()來劫持各個屬性的setter和getter，在
數據變動時發布消息給訂閱者，觸發相應監聽回調。
當把一個普通JavaScript對象傳給vue實例作為它的data選項時，vue將遍歷它的屬性，用Object.defineProperty將它們轉為getter/setter,
用戶看不到getter/setter，但是在內部它們讓vue追蹤依賴，在屬性被訪問和修改時通知變化
vue的數據雙向綁定，將MVVM作為數據綁定的入口，整合observe，compile，和watcher三者，通過Observer來監聽自己的model的數據變化
通過compile來解析編譯模板指令，最終利用watcher搭起Observer和compile之間的通信橋梁，達到數據變化-->視圖更新,視圖交互變化-->數據model變更的雙向綁定效果
<script>
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(e) {
obj.txt = e.target.value
})
</script>
四、組件件的參數傳遞
1，父組件與子組件傳值
父傳子：props
子傳父：$emit方法傳遞參數
2， 兄弟組件傳值
使用vuex或者eventBus(事件總線)
五、vue的路由模式有哪些？有什么區別？
兩種模式： hash和history
hash模式： 在瀏覽器的url地址欄，#號以及#號后面的字符稱之為hash，這種路由稱之為hash模式導航；可以用window.location.hash讀取hash
hash雖然在url中，但是不被包含在http請求中；只用來知道瀏覽器動作，對服務端完全無用，hash不會重新加載頁面
hash模式下，僅hash符號之前的內容會被包含在請求中，因此對於后端來說，即使沒有做到對路由的全覆蓋，也不會返回404錯誤
history模式： 采用html5的新特性；url就像正常的url一樣，不會有#號；使用需要后台配置支持，增加一個覆蓋所有情況的候選資源，如果匹配不到任何資源，就返回同一個index.html頁面
六、Vue與React以及Angular的區別
1.Vue與React
相同點：都采用虛擬DOM技術，都是組件化開發，都需要編譯后使用，都提供了鈎子函數，都不內置ajax，route等功能核心包，而是以插件的方式加載，都支持服務器端渲染
都提供了自動化構建工具
不同點：
react是函數式思想，vue是響應式思想，數據驅動視圖；
react適合大型項目，vue比較適合中小型項目；
react采用的虛擬dom會對渲染出來的結果做臟檢查，vue在模板中定義了指令，過濾器等，可以非常方便，快捷的操作虛擬dom
2.Vue與Angular
相同點： 都支持指令，都支持過濾器，都支持雙向數據綁定，都不支持低端瀏覽器
不同點： Angular學習成本高，而vue本身提供的api都比較簡單，直觀；Angular依賴對數據做臟值檢查，所以watcher越多越慢，而vue使用基於依賴追蹤的觀察並使用異步隊列更新；
七、Vue路由鈎子函數
1 全局路由鈎子：beforeEach，afterEach ，beforeResolve（解析鈎子）
2 路由獨享的鈎子：beforeEnter
3 組件內鈎子：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
八、vue-cli怎么新增自定義指令？
<template>
<div id="app">
<div v-dir1></div>
</div>
</template>
<script>
var app = new Vue({
el: '#app',
data: {
},
//創建局部指令
directives: {
dir1: {
inserted(el) {
// el,當前使用指令的dom
el.style.width = '200px'
el.style.height = '200px'
el.style.background = '#f00'
}
}
}
})
</script>
九、對keep-alive的了解？
keep-alive是Vue的一個內置組件，可以使被包含的組件保留狀態，或避免重新渲染
keep-alive有兩個屬性，include和exclude
include--字符串或正則，任何名稱匹配的組件都會被緩存，使用逗號分隔開，或者使用數組方式
exclude--字符串或正則，任何名稱匹配的組件都不會被緩存
使用方法
<keep-alive>
<component>
<!-- 該組件是否緩存取決於include和exclude屬性 -->
</component>
</keep-alive>
十、一句話回答的面試題
1.css只在當前組件起作用：scoped
2.v-if與v-show的區別：
v-if會銷毀dom重新創建，是真正的條件渲染，v-show只是css樣式display的切換；
v-if首次加載開銷比較大
v-if適用於切換頻率較低的情況，而v-show適用於頻繁切換
3.route與router的區別？
route是路由信息對象，包括path，params，hash，query，fullPath,matched,name等路由信息
router是路由實例對象，包含了路由的跳轉方法，鈎子函數等
4.Vuejs的兩大核心
數據驅動，組件系統
5.常用的幾種指令： v-if,v-else,v-show,v-for,v-bind,v-text,v-html，v-on
6.vue的常用修飾符：
.number ：將表單字符數字轉化為數字
.prevent：提交事件不再重載頁面
.stop：阻止事件冒泡
.self：當事件發生在給元素本身而不是子元素的時候觸發
.trim：去除表單前后空格
.lazy: input失去焦點觸發change事件
7.v-on可以綁定多個方法嗎？ 可以 <input type='text' @focu="" @blur="" />
8.vue中key值得作用：
更高效的更新虛擬dom
9.什么是vue的計算屬性？computed與methods有什么不同？
在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對數據進行復雜處理，且可能多次使用的情況下，盡量采用計算屬性的方法
好處：數據處理結構清晰；依賴於數據，數據更新，處理結果自動更新；計算屬性的this指向組件實例；
區別：computed是屬性調用，而methods是函數調用
computed具有緩存功能，當依賴的數據不發生改變時，直接從緩存中取值，不需要重新計算
methods不管依賴的數據是否改變，都會重新計算一次
10.vue等單頁面應用及其優缺點
優點：組件化，輕量，簡潔，高效，數據驅動視圖等
缺點：不利於seo，不支持低級瀏覽器，第一次加載耗時長，不能使用瀏覽器的前進后退導航按鈕