Vue 与 MVVM 之间那些事儿

上一回：作足前戏，让你平滑进入 Vue

书接上文，上一回我们说到了现在的前端江湖早已经是框架三分天下的格局。接下来，我们就要说到主角 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 逻辑就能够了。

下一回：初入 Vue 的世界 Say Hello