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

最近有時間，整理一下Vue的知識點，很多都是面試常見的

如果你能理解了這張圖，也就對Vue的生命周期有了一個大致的了解。

vue生命周期總共分為8個階段 創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。

創(chuàng)建/前后：在beforeCreated階段，vue實例的掛載元素el還沒有。在beforeCreated階段可以添加loading事件，在created階段發(fā)起后端請求，拿回數(shù)據(jù)

載入前/后：在beforeMount階段，vue實例的$el和data都初始化，但是掛載之前為虛擬的dom節(jié)點，data.message還未替換，頁面無重新渲染。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/后：當data變化時，會觸發(fā)beforeUpdate和updated方法。

銷毀前/后：在執(zhí)行destroy方法后，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經解除了事件監(jiān)聽以及和dom的綁定，但是dom結構依然存在。

第一次頁面加載會觸發(fā)哪幾個鉤子？
答：會觸發(fā) 下面這幾個beforeCreate, created, beforeMount, mounted 。
DOM 渲染在 哪個周期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。

MVVM分為Model、View、ViewModel三者。

Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務邏輯都在Model層中定義；

View 代表UI視圖，負責數(shù)據(jù)的展示；

ViewModel 負責監(jiān)聽 Model 中數(shù)據(jù)的改變并且控制視圖的更新，處理用戶交互操作；

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

答：vue.js 是采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的
setter，getter，在數(shù)據(jù)變動時發(fā)布消息 給訂閱者，觸發(fā)相應的監(jiān)聽回調。
具體步驟:

第一步:需要observe的數(shù)據(jù)對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter

這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化

第二步:compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應的節(jié)點綁定

更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

第三步:Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:

1、在自身實例化時往屬性訂閱器(dep)里面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，并觸發(fā)Compile中綁定的回調，則功成身退。

第四步:MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數(shù)據(jù)變化->視圖更新;視圖交互變化(input)->數(shù)據(jù)model變更的雙向綁定效果。

詳細請看：Vue 雙向數(shù)據(jù)綁定原理詳細分析

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

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

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

hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀??；
特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如 http://www.xxx.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。

history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監(jiān)聽到狀態(tài)變更。
history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面?！?/pre>

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

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


9、vue中 key 值的作用？
key的作用主要是為了高效的更新虛擬DOM。