Vue核心50講 | 第一回：Vue 與 MVVM 之間那些事兒

書接上文，上一回我們說到了現在的前端江湖早已經是框架三分天下的格局。接下來，我們就要說到主角 Vue 了。在說真正的 Vue 內容以前，我們還要先來講說 Vue 與 MVVM 之間的那些事兒。

---

什麼是Vue

想要近距離了解什麼是 Vue，其實特別簡單。我們只須要訪問 Vue的官方網站 就能夠了。

映入眼簾的，我們能夠看到說 Vue 是漸進式 JavaScript 框架，英文叫作「Progressive JavaScript Framework」。固然，你如今並不須要知道什麼是漸進式 JavaScript 框架。
那麼接下來，我們再進一步看看 Vue 的官方是如何來介紹本身的呢。

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

關於這個定義我們不作過多的解釋了，由於就算解釋估計你如今也很難知道它在說個啥！若是你不知足，那咱們就再看一個 Vue 官方提供的視頻吧。

Vue的特色

根據 Vue 的官方提供的信息，我們能夠看到 Vue 主要的特色集中在三點：

• 易用：只要你掌握了 HTML、CSS 和 JavaScript，就能夠直接來學習 Vue 框架了。
• 靈活：Vue 提供一個核心庫，相似於 jQuery。依賴自身不斷繁榮的生態系統，相似於 jQuery 的插件庫同樣，能夠在一個庫和一套完整框架之間自如伸縮。
• 高效：核心庫文件壓縮以後只有 20KB，遠比 jQuery 的壓縮版文件小得多。而且還提供超快的虛擬 DOM。

整體來說，Vue 的官方就是告訴你，用我這個框架要求很低，會HTML、CSS 和 JavaScript 就能夠了。並且，我這個框架的核心庫 Vue.js 文件很小，你使用的時候不會對你如今的項目形成多大的影響。
褲襠裏着火，固然了！咱們如今也沒用 Vue 來開發個網頁，因此它所謂的優點對於我們現階段來講只不過自說自話而已。是否是這個樣子，我們還須要在具體的案例中體驗。

什麼是 MVVM

關於 Vue 我們說了這麼多，接下來再來講說關於 MVVM 吧。MVVM 呢，實際上是一種開發模式。固然，這麼說估計你也是一臉懵逼的。
心急吃不了熱豆腐，且聽我慢慢道來~
MVVM 其實表示的是 View-ViewModel-Model，就是視圖層-視圖模型層-模型層。View是做爲視圖層，簡單來講能夠把它理解爲HTML頁面；Model 是做爲模型層，它是負責處理業務邏輯以及和服務器端進行交互的；ViewModel 是做爲視圖模型層，也就是 Vue 框架所起到的做用了，主要是做爲 View 層和 Model 層之間的通訊橋樑。

Vue 與 MVVM

說到這呢，可能你會產生個疑問，Vue 和 MVVM 之間是個什麼關係呢？
其實，Vue 框架就是一個典型的 MVVM 模型的框架。在解釋 MVVM 模式的時候，我們也說了，Vue 框架其實就是起到 MVVM 模式中的 ViewModel 層的做用。
這麼說仍是會比較抽象，接下來我們用代碼來進一步解釋 Vue 和 MVVM 之間的關係。
若是你使用過 jQuery 的話，那你對 DOM 操做、事件綁定必定不陌生啦！好比我們如今經過 jQuery 來爲指定的 DOM 添加一個 button 按鈕，併爲它綁定 click 事件，具體的代碼就像下面這樣：

if (showBtn) {
  var btn = $('<button>點我點我點我</button>');
  btn.on('click', function(){
      console.log('你終於點中了我...');
  });
  $('#app').append(btn);
}

上面這段代碼的邏輯並不複雜。可是這樣的代碼最大的問題就是負責視圖的 HTML 代碼和負責業務邏輯的 JavaScript 代碼耦合在一塊兒。隨着功能的不斷完善和增長，直接操做 DOM 會變得愈來愈麻煩。
像 Vue 這樣的 MVVM 框架將視圖層和模型層有效地分離開來，這樣你只須要關心數據就行啦！

<script src="https://unpkg.com/vue"></script>
<div id="app">
    <button v-if="showBtn" v-on:click="handleClick">點我點我點我</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            showBtn: true
        },
        methods: {
            handleClick: function(){
                console.log('你終於點中了我...');
            }
        }
    });
</script>

上面這段代碼我們會發現，負責視圖的 HTML 代碼和負責業務邏輯的 JavaScript 代碼有效地分離開來。之因此能作到這一點，主要是依靠 Vue 框架才得以實現的。

因此，Vue 框架就是充當了 MVVM 開發模式中的 ViewModel 層，負責 View 和 Model 之間通訊的橋樑。我們在使用 Vue 框開發的時候，只須要關心 View 層的 HTML 代碼和 Model 層的 JavaScript 邏輯就能夠了。