最近有時間，整理一下Vue的知識點，很多都是面試常見的
1、Vue的生命週期
如果你能理解了這張圖，也就對Vue的生命週期有了一個大致的瞭解。
vue生命週期總共分爲8個階段 創建前/後，載入前/後，更新前/後，銷燬前/後。
- 創建/前後：在beforeCreated階段，vue實例的掛載元素el還沒有。在beforeCreated階段可以添加loading事件，在created階段發起後端請求，拿回數據
- 載入前/後：在beforeMount階段，vue實例的$el和data都初始化，但是掛載之前爲虛擬的dom節點，data.message還未替換，頁面無重新渲染。在mounted階段，vue實例掛載完成，data.message成功渲染。
- 更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
- 銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在。
第一次頁面加載會觸發哪幾個鉤子？
答：會觸發 下面這幾個beforeCreate, created, beforeMount, mounted 。
DOM 渲染在 哪個週期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。2、對MVVM開發模式的理解？
MVVM分爲Model、View、ViewModel三者。
- Model 代表數據模型，數據和業務邏輯都在Model層中定義；
- View 代表UI視圖，負責數據的展示；
- ViewModel 負責監聽 Model 中數據的改變並且控制視圖的更新，處理用戶交互操作；
Model 和 View 並無直接關聯，而是通過 ViewModel 來進行聯繫的，Model 和 ViewModel 之間有着雙向數據綁定的聯繫。
這種模式實現了 Model 和 View 的數據自動同步，因此開發者只需要專注對數據的維護操作即可，而不需要自己操作 dom。
3、VUE數據雙向綁定原理
答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的
setter，getter，在數據變動時發佈消息 給訂閱者，觸發相應的監聽回調。
具體步驟:
- 第一步:需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
- 第二步:compile解析模板指令，將模板中的變量替換成數據，然後初始化渲染頁面視圖，並將每個指令對應的節點綁定
更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖
- 第三步:Watcher訂閱者是Observer和Compile之間通信的橋樑，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)裏面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。 - 第四步:MVVM作爲數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋樑，達到數據變化->視圖更新;視圖交互變化(input)->數據model變更的雙向綁定效果。
詳細請看：Vue 雙向數據綁定原理詳細分析
4、v-if 和 v-show 有什麼區別？
v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；而v-if會控制這個 DOM 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理。
5、父子組件之間的傳值和通信？
父組件向子組件傳值：
1）子組件在props中創建一個屬性，用來接收父組件傳過來的值；
2）在父組件中註冊子組件；
3）在子組件標籤中添加子組件props中創建的屬性；
4）把需要傳給子組件的值賦給該屬性
子組件向父組件傳值：
1）子組件中需要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；
2）將需要傳的值作爲$emit的第二個參數，該值將作爲實參傳給響應事件的方法；
3）在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。
6、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 依賴的頁面。”
7、vue路由的鉤子函數
首頁可以控制導航跳轉，beforeEach，afterEach等，一般用於頁面title的修改。一些需要登錄才能調整頁面的重定向功能。
beforeEach主要有3個參數to，from，next：
to：route即將進入的目標路由對象，
from：route當前導航正要離開的路由
next：function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉。
8、vue等單頁面應用及其優缺點
優點：Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、後退。
9、vue中 key 值的作用？
key的作用主要是爲了高效的更新虛擬DOM。