摘要：最近有時間，整理一下的知識點，很多都是面試常見的的生命周期如果你能理解了這張圖，也就對的生命周期有了一個大致的了解。創建前后在階段，實例的掛載元素還沒有。模式下，前端的必須和實際向后端發起請求的一致，如。

最近有時間，整理一下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 中就已經完成了。

MVVM分為Model、View、ViewModel三者。

Model 代表數據模型，數據和業務邏輯都在Model層中定義；

View 代表UI視圖，負責數據的展示；

ViewModel 負責監聽 Model 中數據的改變并且控制視圖的更新，處理用戶交互操作；

Model 和 View 并無直接關聯，而是通過 ViewModel 來進行聯系的，Model 和 ViewModel 之間有著雙向數據綁定的聯系。
這種模式實現了 Model 和 View 的數據自動同步，因此開發者只需要專注對數據的維護操作即可，而不需要自己操作 dom。

答：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 雙向數據綁定原理詳細分析

v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；而v-if會控制這個 DOM 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理。

父組件向子組件傳值：
1）子組件在props中創建一個屬性，用來接收父組件傳過來的值；
2）在父組件中注冊子組件；
3）在子組件標簽中添加子組件props中創建的屬性；
4）把需要傳給子組件的值賦給該屬性

子組件向父組件傳值：
1）子組件中需要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；
2）將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應事件的方法；
3）在父組件中注冊子組件并在子組件標簽上綁定自定義事件的監聽。

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 依賴的頁面。”

首頁可以控制導航跳轉，beforeEach，afterEach等，一般用于頁面title的修改。一些需要登錄才能調整頁面的重定向功能。
beforeEach主要有3個參數to，from，next：
to：route即將進入的目標路由對象，
from：route當前導航正要離開的路由
next：function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉。

優點：Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利于SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、后退。

9、vue中 key 值的作用？

key的作用主要是為了高效的更新虛擬DOM。