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

DIVI發表於2018-10-01

近期不斷面試中，面試官都會提一些關於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物件的內部狀態發生變化的時候，就會把這個變化通知所有的觀察者。