一、對(duì)于MVVM的理解

MVVM是model-view-viewmodel的簡(jiǎn)寫(xiě)。

model：代表數(shù)據(jù)模型，也可以在model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。

view：代表UI組件，負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)出來(lái)。

viewmodel：監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互。簡(jiǎn)單理解就是一個(gè)同步model和view的對(duì)象，連接view和model。

在MVVM架構(gòu)下，view和model之間并沒(méi)有直接的聯(lián)系，而是通過(guò)viewmodel進(jìn)行交互，model和viewmodel之間的交互是雙向的，因此view數(shù)據(jù)的變化會(huì)同步到model中，而model數(shù)據(jù)的變化也會(huì)立即反應(yīng)到view上。viewmodel通過(guò)雙向數(shù)據(jù)綁定把view層和model層連接起來(lái)，而view和model之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開(kāi)發(fā)者值只需要關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM，不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由MVVM來(lái)統(tǒng)一管理。

二、Vue的生命周期

Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是vue的生命周期。從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM->渲染、更新->渲染、銷(xiāo)毀等一系列過(guò)程，稱(chēng)之為vue的生命周期。

beforeCreate（創(chuàng)建前）：在數(shù)據(jù)觀測(cè)和初始化事件還沒(méi)開(kāi)始。

created（創(chuàng)建后）：完成數(shù)據(jù)觀測(cè)、屬性和方法的運(yùn)算、初始化事件，$el屬性還沒(méi)有顯示出來(lái)。

beforeMount（載入前）：在掛載開(kāi)始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用。實(shí)例已經(jīng)完成以下配置：編譯模板，把data里面的數(shù)據(jù)和模板生成HTML。此時(shí)還沒(méi)有掛載HTML到頁(yè)面。

mounted（載入后）：在el被新創(chuàng)建的vm.$el替換并掛載到實(shí)例上去之后調(diào)用。實(shí)例已經(jīng)完成以下配置：用上面編譯好的HTML內(nèi)容替換el屬性指向的DOM對(duì)象，完成模板中的HTML渲染到HTML頁(yè)面中，此過(guò)程中進(jìn)行ajax交互。

beforeUpdate（更新前）：在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前?？梢栽僭撱^子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的渲染過(guò)程。

updated（更新后）：在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時(shí)，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴(lài)于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy（銷(xiāo)毀前）：在實(shí)例銷(xiāo)毀之前調(diào)用，實(shí)例仍然完全可用。

destroyed（銷(xiāo)毀后）：在實(shí)例銷(xiāo)毀后調(diào)用，調(diào)用后，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。改鉤子在服務(wù)器端渲染期間不被調(diào)用。

三、Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty()

Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty（）來(lái)劫持各個(gè)屬性的setter、getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)。當(dāng)把一個(gè)普通JavaScript對(duì)象傳給Vue實(shí)例來(lái)作為它的data選項(xiàng)時(shí)，Vue將遍歷它的屬性，用Object.defineProperty（）將它們轉(zhuǎn)為getter/setter。用戶看不到getter/setter，但是在內(nèi)部它們讓Vue追蹤依賴(lài)，在屬性被訪問(wèn)和修改時(shí)通知變化。?

Vue的數(shù)據(jù)雙向綁定將MVVM作為數(shù)據(jù)綁定的入口，整合Observer，Compile和Watcher三者，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model的數(shù)據(jù)變化，通過(guò)Compile【mustache語(yǔ)法】來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化->視圖更新；視圖交互變化->數(shù)據(jù)model變更雙向綁定效果。

四、Vue組件間的參數(shù)傳遞

1.父子組件傳值

父組件傳值給子組件：子組件通過(guò)props方法接收數(shù)據(jù)，props里的數(shù)據(jù)只能用于展示不能修改。

子組件傳值給父組件：$emit方法傳遞參數(shù)。

2.兄弟組件傳值

eventBus。就是傳建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接收事件。項(xiàng)目比較小時(shí)，用這個(gè)比較合適。

五、Vue路由的實(shí)現(xiàn)：hash模式和history模式

hash模式：在瀏覽器中符號(hào)“#”表示，#以及#后面的字符稱(chēng)之為hash，用window.location.hash讀取。特點(diǎn)是hash雖然在URL中，但不被包括在http請(qǐng)求中，用來(lái)指導(dǎo)瀏覽器動(dòng)作，對(duì)服務(wù)器端晚完全無(wú)用，hash不會(huì)重加載頁(yè)面。hash模式下，近hash符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，因此對(duì)于后端來(lái)說(shuō)，即使沒(méi)有做到對(duì)路由的全覆蓋，也不會(huì)返回404錯(cuò)誤。

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

六、Vue路由的鉤子函數(shù)

首頁(yè)可以控制導(dǎo)航跳轉(zhuǎn)，一般用于頁(yè)面title的修改。一些需要登錄才能調(diào)整頁(yè)面的重定向功能。

beforeEach（to，from，next ）：全局前置守衛(wèi)。有三個(gè)參數(shù)，to：route即將進(jìn)入的目標(biāo)路由對(duì)象。from：route當(dāng)前導(dǎo)航正要離開(kāi)的路由。next：本身是function，一定要調(diào)用該方法resolve這個(gè)鉤子，如果不執(zhí)行就不會(huì)進(jìn)行下一步，執(zhí)行效果依賴(lài)next方法的調(diào)用參數(shù)。

七、Vuex的使用

Vuex是一個(gè)專(zhuān)門(mén)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex的核心是store。

這個(gè)狀態(tài)自管理應(yīng)用包含以下幾個(gè)部分：

state：單一狀態(tài)樹(shù)。Vuex使用單一狀態(tài)樹(shù)，即每個(gè)應(yīng)用僅僅包含一個(gè)store實(shí)例，用一個(gè)對(duì)象就包含了全部應(yīng)用層級(jí)狀態(tài)。但不能直接修改state里的數(shù)據(jù)，改變store中的狀態(tài)的唯一途徑是顯式的提交mutation，通過(guò)提交mutation的方式，可以更好地追蹤狀態(tài)的變化。在計(jì)算屬性中通過(guò)store.state來(lái)獲取狀態(tài)對(duì)象，在methods中通過(guò)store.commit方法提交mutation觸發(fā)狀態(tài)變更。

getters：類(lèi)似Vue的計(jì)算屬性，主要用類(lèi)似過(guò)濾數(shù)據(jù)。getter接受state作為第一個(gè)參數(shù)，也可以接受其他getter作為第二參數(shù)，參數(shù)名為getters。getter在通過(guò)方法訪問(wèn)時(shí)，每次都會(huì)去進(jìn)行調(diào)用而不會(huì)緩存結(jié)果

mutations：mutations定義的方法動(dòng)態(tài)修改state中的數(shù)據(jù)，是同步方法。mutation是更改Vuex的store.state的唯一方式，state里的值只能在mutation中修改，mutation的第一個(gè)參數(shù)一定是默認(rèn)參數(shù)state，mutation的普通提交方法是調(diào)用$store.commit；mutation的封裝提交方法是封裝對(duì)象，這樣Vuex文件拿到的參數(shù)就是一個(gè)對(duì)象，參數(shù)命名默認(rèn)payload作為第二參數(shù)。mutation相響應(yīng)改變state中的數(shù)據(jù)的規(guī)則如下：1.屬性已經(jīng)在state中初始化；2.給state中的對(duì)象添加新屬性時(shí)使用以下方式：2.1.Vue.set（state.object，‘key’，‘value’）；2.2.用新對(duì)象給舊對(duì)象重新賦值。

actions：actions可以理解為通過(guò)將mutations里面處理數(shù)據(jù)的方法變成異步的處理數(shù)據(jù)的方法，簡(jiǎn)單地說(shuō)就是異步操作數(shù)據(jù)，默認(rèn)參數(shù)context。view層通過(guò)store.dispatch來(lái)分發(fā)action

modules：項(xiàng)目特別復(fù)雜的時(shí)候，可以讓每一個(gè)模塊擁有自己的state、mutation、action、getter，使結(jié)構(gòu)非常清晰，方便管理

Vuex的應(yīng)用場(chǎng)景：用戶的登錄狀態(tài)、用戶名稱(chēng)、頭像、地理位置，商品的收藏，購(gòu)物車(chē)中的商品等多個(gè)組件共享同一個(gè)狀態(tài)的場(chǎng)景。

八、對(duì)keep-alive的了解

keep-alive是Vue內(nèi)置的一個(gè)組件，可以使被包含的組件保留存活狀態(tài)不被銷(xiāo)毀，或避免重新渲染。在Vue2.1.0版本之后，keep-alive新加入兩個(gè)屬性：include（包含的組件緩存）與exclude（排除的組件不緩存，優(yōu)先級(jí)大于include）。兩個(gè)屬性里面的值用逗號(hào)隔開(kāi)，逗號(hào)后面不能跟空格，正則表達(dá)式也不能。

include- 字符串或正則表達(dá)式，只有名稱(chēng)匹配的組件會(huì)被緩存。

exclude-?字符串或正則表達(dá)式，名稱(chēng)匹配的組件都不會(huì)被緩存。

二者都可以用逗號(hào)分隔字符串、正則表達(dá)式、數(shù)組。當(dāng)使用正則表達(dá)式或者是數(shù)組時(shí)，要用v-bind。