1.首先，請(qǐng)談一下對(duì)Vue的理解？

我們都知道Vue是如今比較流行的一個(gè)用于創(chuàng)建用戶界面的開源JavaScript漸進(jìn)式框架，也是一個(gè)創(chuàng)建單頁應(yīng)用的Web應(yīng)用框架。它有如下特點(diǎn)：

1）數(shù)據(jù)驅(qū)動(dòng)：Vue是一個(gè)輕量級(jí)的框架，它只關(guān)注視圖層，通過MVVM思想實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，數(shù)據(jù)驅(qū)動(dòng)頁面視圖。所以開發(fā)者不用再操作dom對(duì)象，只需去思考業(yè)務(wù)邏輯。

2）組件化：Vue把一個(gè)單頁面應(yīng)用的各種模塊拆分成了一個(gè)個(gè)單獨(dú)的組件。我們只需對(duì)于各個(gè)組件進(jìn)行實(shí)際的實(shí)現(xiàn)，如果需要使用它，我們就使用標(biāo)簽進(jìn)行引用。這樣可以降低整個(gè)系統(tǒng)的耦合度，方便調(diào)試以及提高可維護(hù)性。

3）單頁Web應(yīng)用（single page application，SPA）：只有一個(gè)Web頁面的應(yīng)用，就是所有必要的代碼（HTML、JavaScript和CSS）都通過單個(gè)頁面的加載而檢索，或者根據(jù)需要（通常是為響應(yīng)用戶操作）動(dòng)態(tài)裝載適當(dāng)?shù)馁Y源并添加到頁面。并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁面的Web應(yīng)用程序。

補(bǔ)充：

a. 單頁面應(yīng)用程序：只有第一次會(huì)加載頁面, 以后的每次請(qǐng)求， 僅僅是獲取必要的數(shù)據(jù)。然后, 由頁面中js解析獲取的數(shù)據(jù), 展示在頁面中。

b. 多頁面應(yīng)用程序：對(duì)于傳統(tǒng)的多頁面應(yīng)用程序來說，每次請(qǐng)求服務(wù)器返回的都是一個(gè)完整的頁面，即需要重新加載html、css、js文件。

2.上面說Vue是一款漸進(jìn)式框架，談一下對(duì)漸進(jìn)式框架的理解？

首先漸進(jìn)式是Vue的設(shè)計(jì)理念。Vue.js

最突出的優(yōu)勢(shì)在于可以對(duì)數(shù)據(jù)進(jìn)行雙向綁定，也就是聲明式渲染。如上圖所示，Vue還有組件系統(tǒng)、客戶端路由、大規(guī)模狀態(tài)管理、構(gòu)建工具等完整的功能，他們之間都是相互獨(dú)立的，我們可以在核心功能上選用其他部件。我們可以理解為只要自己想要部分，只做自己想做的事。

3. 解釋一下MVVM（數(shù)據(jù)驅(qū)動(dòng)）

MVVM 是 Model-View-ViewModel 的縮寫。Model代表模型層，負(fù)責(zé)處理業(yè)務(wù)邏輯以及和服務(wù)器端進(jìn)行交互；

View代表視圖層，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來；

ViewModel代表視圖模型層，用來連接Model和View，是Model和View之間的通信橋梁，監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象，連接Model和View。DOMListeners和DataBindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOMListeners監(jiān)聽頁面所有View層DOM元素的變化，當(dāng)發(fā)生變化，Model層的數(shù)據(jù)隨之變化；DataBindings監(jiān)聽Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化，View層的DOM元素隨之變化。如下圖：

4. 雙向綁定的原理

Vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的。雙向數(shù)據(jù)綁定都是基于Object.defineProperty()重新定義get和set方法實(shí)現(xiàn)的。修改觸發(fā)set方法賦值，獲取觸發(fā)get方法取值，并通過數(shù)據(jù)劫持發(fā)布信息。示例：

1）new Vue()首先執(zhí)行初始化，對(duì)data執(zhí)行響應(yīng)化處理，這個(gè)過程發(fā)生Observe中

2）同時(shí)對(duì)模板執(zhí)行編譯，找到其中動(dòng)態(tài)綁定的數(shù)據(jù)，從data中獲取并初始化視圖，這個(gè)過程發(fā)生在Compile中

3）同時(shí)定義?個(gè)更新函數(shù)和Watcher，將來對(duì)應(yīng)數(shù)據(jù)變化時(shí)Watcher會(huì)調(diào)用更新函數(shù)

4）由于data的某個(gè)key在?個(gè)視圖中可能出現(xiàn)多次，所以每個(gè)key都需要?個(gè)管家Dep來管理多個(gè)Watcher

5）將來data中數(shù)據(jù)?旦發(fā)生變化，會(huì)首先找到對(duì)應(yīng)的Dep，通知所有Watcher執(zhí)行更新函數(shù)。

5. Vue組件之間的通信有哪些？

a. 父?jìng)髯?props；b. 子傳父 $emit；c. Vuex 狀態(tài)管理器（詳情見此文）

6. 對(duì)Vue指令的理解

vue一共為我們提供了14種內(nèi)置指令：v-text? v-html? v-show? v-ifv-elsev-else-ifv-forv-on? v-bind? v-model? v-slot? v-pre? v-cloak? v-once。它們作用于HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時(shí)，指令會(huì)為綁定的目標(biāo)元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。指令的本質(zhì)就是語法糖或者說是標(biāo)志位，目的是為了操作DOM，將操作DOM的邏輯封裝成指令（簡(jiǎn)化代碼量），然后交給編譯器，最后生成js代碼來渲染我們的頁面。

7.v-show和v-if、v-bind 和v-on 指令的區(qū)別

它們都是控制元素的顯示和隱藏。但是實(shí)現(xiàn)本質(zhì)方法不同，

v-show本質(zhì)就是通過控制css中的display設(shè)置為none，控制隱藏，只會(huì)編譯一次；不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。

v-if是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素。v-if也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。

而且v-if不停的銷毀和創(chuàng)建比較消耗性能。如果要頻繁切換某節(jié)點(diǎn)，使用v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節(jié)點(diǎn)使用v-if（初始渲染開銷較小，切換開銷比較大）。

v-bind 綁定用來將html標(biāo)簽中相關(guān)屬性綁定到vue實(shí)例中，日后通過對(duì)vue實(shí)例中數(shù)據(jù)改變，影響到對(duì)應(yīng)標(biāo)簽中屬性值變化。

v-on 指令用于綁定HTML事件。

8. 簡(jiǎn)述computed和watch的區(qū)別

答：computed:是計(jì)算屬性。為了應(yīng)對(duì)復(fù)雜的邏輯計(jì)算。有緩存，只有當(dāng)緩存改變時(shí)才執(zhí)行（即只執(zhí)行一遍getter）。當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到computed。例如：購物車商品總價(jià)結(jié)算。

watch:是偵聽屬性。對(duì)數(shù)據(jù)的變化作出反應(yīng)，沒有緩存，從新渲染就會(huì)執(zhí)行。當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用watch。例如：搜索數(shù)據(jù)。

9. 簡(jiǎn)述Vue的生命周期。