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

最近有時(shí)間，整理一下Vue的知識(shí)點(diǎn)，很多都是面試常見的

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

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

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

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

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

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

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

MVVM分為Model、View、ViewModel三者。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9、vue中 key 值的作用？

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