近期不斷面試中，面試官都會提一些關于Vue相關的源碼和“全家桶”之類的問題。那么針對這些提問，我們應該如何更好應答呢？在這里我把對Vue的理解整理出來供大家來參考。

1.Vue是什么？

Vue是一套構(gòu)建用戶界面的漸進式框架，也是一個非常典型的 MVVM 的程序結(jié)構(gòu)（model-view-viewmodel）。

官方用語：

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。

2.vue既然是MVVM結(jié)構(gòu)比MVC好在哪里？

MVC模式是MVVM模式的基礎，這兩種模式更像是MVC模式的優(yōu)化改良版,他們兩個的MV即Model，view相同，不同的是MV之間的紐帶部分。

?什么是MVC？

MVC允許在不改變視圖的情況下改變視圖對用戶輸入的響應方式，用戶把對View的操作交給了Controller處理，在Controller中響應View的事件調(diào)用Model的接口對數(shù)據(jù)進行操作，一旦Model發(fā)生變化便通知相關視圖進行更新。

如果前端沒有框架，只使用原生的html js，MVC模式可以這樣理解。將html看成view;js看成controller，負責處理用戶與應用的交互，響應對view的操作（對事件的監(jiān)聽），調(diào)用Model對數(shù)據(jù)進行操作，完成model與view的同步（根據(jù)model的改變，通過選擇器對view進行操作）;將js的ajax當做Model，也就是數(shù)據(jù)層，通過ajax從服務器獲取數(shù)據(jù)。

?什么是MVVM?

MVVM與MVC兩者之間最大的區(qū)別就是：MVVM實現(xiàn)了對View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動操作Dom元素來改變View的變化，而是改變其屬性后，該屬性對應的View層數(shù)據(jù)會自動改變。 以Vue為例：

<div id="vueDemo"><p>{{ title }}</p><button v-on:click="clickEvent">hello word</button> </div> var vueDemo = new Vue({ el: '#vueDemo', data: { title: 'Hello Vue!' }, methods: { clickEvent: function () { this.title = "hello word!" } } })

這里的html => View層，可以看到這里的View通過模板語法來聲明式的將數(shù)據(jù)渲染進DOM元素，當ViewModel對Model進行更新時，通過數(shù)據(jù)綁定更新到View。

Vue實例中的data相當于Model層，而ViewModel層的核心是Vue中的雙向數(shù)據(jù)綁定，當Model發(fā)生變化時View也可以跟著實時更新，同理，View變化也能讓Model發(fā)生變化。

總的看來，MVVM比MVC精簡很多，不僅簡化了業(yè)務與界面的依賴，還解決了數(shù)據(jù)頻繁更新的問題，不用再用選擇器操作DOM元素。因為在MVVM中，View不知道Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提高代碼的可重用性。

3.Vue響應式原理是什么？

Vue是基于 Object.defineProperty 來實現(xiàn)數(shù)據(jù)響應的，而 Object.defineProperty 是 ES5 中一個無法 shim 的特性，不支持IE8以下版本的瀏覽器。Vue通過Object.defineProperty的 getter/setter 方法對收集的依賴項進行監(jiān)聽,在屬性被訪問和修改時通知變化,進而更新視圖數(shù)據(jù)； 受現(xiàn)代JavaScript 的限制 (以及廢棄 Object.observe)，Vue不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對象上存在才能讓Vue轉(zhuǎn)換它，這樣才能讓它是響應的。

觀察者模式（Observer, Watcher, Dep)

先簡介一下，后面的文章會具體的寫到：

Observer類

主要用于給Vue的數(shù)據(jù)defineProperty增加getter/setter方法，并且在getter/setter中收集依賴或者發(fā)送通知進行更新。

Watcher類

用于觀察數(shù)據(jù)（或者表達式）變化然后執(zhí)行回調(diào)函數(shù)（其中也有收集依賴的過程），主要用于$watch API和指令上。

Dep類（Dependence依賴的縮寫）

就是一個可觀察對象，可以有不同指令訂閱它（它是多播的）

觀察者模式,跟發(fā)布／訂閱模式有點像，但是其實略有不同。

發(fā)布／訂閱模式是由統(tǒng)一的事件分發(fā)調(diào)度中心，on則往中心中數(shù)組加事件（訂閱），emit則從中心中數(shù)組取出事件（發(fā)布），發(fā)布和訂閱以及發(fā)布后調(diào)度訂閱者的操作都是由中心統(tǒng)一完成。

但是觀察者模式則沒有這樣的中心，觀察者模式中包含observer觀察者和subject主題對象。observer需要觀察subject時，需要先到subject里進行注冊subject對象持有observer對象的集合句柄，當subject對象的內(nèi)部狀態(tài)發(fā)生變化的時候，就會把這個變化通知所有的觀察者。

4.Vue源碼有過了解嗎？

之前對Vue源碼也是有點小小的研究，只不過沒有很體系的記錄，現(xiàn)在有點時間，那就做一次基礎的總結(jié)吧。一方面要克服自己的惰性，另一方面也蠻想重新溫故一遍。哈哈~~ 我們先來看一下Vue源碼的目錄結(jié)構(gòu)吧：

熟悉每個模塊具體的功能，對之后深入研究源碼還是很有幫助的呢。 我偷偷告訴你，我更喜歡去理解下面那張思維導圖哦，接下來的所有文章都會根據(jù)下圖的各個環(huán)節(jié)做個分析哦！

我們可以先看一下概覽：

我會同時更新在github上，你要是喜歡可以給個star，先謝謝啦~

1.淺析Vue源碼（一）—— 造物創(chuàng)世

2.淺析Vue源碼（二）—— initMixin(上)

3.淺析Vue源碼（三）—— initMixin(下)

4.淺析Vue源碼（四）—— $mount中template的編譯--parse

5.淺析Vue源碼（五）—— $mount中template的編譯--optimize

6.淺析Vue源碼（六）—— $mount中template的編譯--generate

7.淺析Vue源碼（七）——render到VNode的生成

8.淺析Vue源碼（八）——依賴收集與監(jiān)聽

9.淺析Vue源碼（九）——VirtualDOM與path

10.vue番外篇 -- vue-router淺析原理

11.Vue番外篇 -- vue.nextTick()淺析

總結(jié)

以上是生活随笔為你收集整理的Vue解析--如何应对面试官提问的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。