Vue解析--如何應對面試官提問

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

1.Vue是什麼？

Vue是一套構建用戶界面的漸進式框架，也是一個很是典型的 MVVM 的程序結構（model-view-viewmodel）。

官方用語：

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

2.vue既然是MVVM結構比MVC好在哪裏？

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

☞什麼是MVC？

MVC容許在不改變視圖的狀況下改變視圖對用戶輸入的響應方式，用戶把對View的操做交給了Controller處理，在Controller中響應View的事件調用Model的接口對數據進行操做，一旦Model發生變化便通知相關視圖進行更新。

若是前端沒有框架，只使用原生的html+js，MVC模式能夠這樣理解。將html當作view;js當作controller，負責處理用戶與應用的交互，響應對view的操做（對事件的監聽），調用Model對數據進行操做，完成model與view的同步（根據model的改變，經過選擇器對view進行操做）;將js的ajax當作Model，也就是數據層，經過ajax從服務器獲取數據。

☞什麼是MVVM?

MVVM與MVC二者之間最大的區別就是：MVVM實現了對View和Model的自動同步，也就是當Model的屬性改變時，咱們不用再本身手動操做Dom元素來改變View的變化，而是改變其屬性後，該屬性對應的View層數據會自動改變。 以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經過模板語法來聲明式的將數據渲染進DOM元素，當ViewModel對Model進行更新時，經過數據綁定更新到View。

Vue實例中的data至關於Model層，而ViewModel層的核心是Vue中的雙向數據綁定，當Model發生變化時View也能夠跟着實時更新，同理，View變化也能讓Model發生變化。

總的看來，MVVM比MVC精簡不少，不只簡化了業務與界面的依賴，還解決了數據頻繁更新的問題，不用再用選擇器操做DOM元素。由於在MVVM中，View不知道Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提升代碼的可重用性。

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

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

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

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

Observer類

主要用於給Vue的數據defineProperty增長getter/setter方法，而且在getter/setter中收集依賴或者發送通知進行更新。

Watcher類

用於觀察數據（或者表達式）變化而後執行回調函數（其中也有收集依賴的過程），主要用於$watch API和指令上。

Dep類（Dependence依賴的縮寫）

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

觀察者模式,跟發佈／訂閱模式有點像，可是其實略有不一樣。

發佈／訂閱模式是由統一的事件分發調度中心，on則往中心中數組加事件（訂閱），emit則從中心中數組取出事件（發佈），發佈和訂閱以及發佈後調度訂閱者的操做都是由中心統一完成。

可是觀察者模式則沒有這樣的中心，觀察者模式中包含observer觀察者和subject主題對象。observer須要觀察subject時，須要先到subject裏進行註冊subject對象持有observer對象的集合句柄，當subject對象的內部狀態發生變化的時候，就會把這個變化通知全部的觀察者。

4.Vue源碼有過了解嗎？

以前對Vue源碼也是有點小小的研究，只不過沒有很體系的記錄，如今有點時間，那就作一次基礎的總結吧。一方面要克服本身的惰性，另外一方面也蠻想從新溫故一遍。哈哈~~ 咱們先來看一下Vue源碼的目錄結構吧：

熟悉每一個模塊具體的功能，對以後深刻研究源碼仍是頗有幫助的呢。 我偷偷告訴你，我更喜歡去理解下面那張思惟導圖哦，接下來的全部文章都會根據下圖的各個環節作個分析哦！

咱們能夠先看一下概覽：

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

1.淺析Vue源碼（一）—— 造物創世

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源碼（八）——依賴收集與監聽

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

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

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