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

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

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

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

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

補(bǔ)充：

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

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

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

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

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

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

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

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

ViewModel代表視圖模型層痰憎，用來(lái)連接Model和View票髓，是Model和View之間的通信橋梁，監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為铣耘、處理用戶(hù)交互洽沟，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象，連接Model和View蜗细。DOMListeners和DataBindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵裆操。DOMListeners監(jiān)聽(tīng)頁(yè)面所有View層DOM元素的變化，當(dāng)發(fā)生變化炉媒，Model層的數(shù)據(jù)隨之變化踪区；DataBindings監(jiān)聽(tīng)Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化吊骤，View層的DOM元素隨之變化缎岗。如下圖：

4. 雙向綁定的原理

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

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

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

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

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

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

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

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

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ì)就是語(yǔ)法糖或者說(shuō)是標(biāo)志位椿浓，目的是為了操作DOM，將操作DOM的邏輯封裝成指令（簡(jiǎn)化代碼量）闽晦，然后交給編譯器扳碍，最后生成js代碼來(lái)渲染我們的頁(yè)面。

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

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

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

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

而且v-if不停的銷(xiāo)毀和創(chuàng)建比較消耗性能走孽。如果要頻繁切換某節(jié)點(diǎn)惧辈，使用v-show(切換開(kāi)銷(xiāo)比較小，初始開(kāi)銷(xiāo)較大)磕瓷。如果不需要頻繁切換某節(jié)點(diǎn)使用v-if（初始渲染開(kāi)銷(xiāo)較小盒齿，切換開(kāi)銷(xiāo)比較大）念逞。

v-bind 綁定用來(lái)將html標(biāo)簽中相關(guān)屬性綁定到vue實(shí)例中，日后通過(guò)對(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甸各。例如：購(gòu)物車(chē)商品總價(jià)結(jié)算。

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

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