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 逻辑就可以了。