第一回：有关 MVX 的内容，你想知道的都在这里

书接上文，上一回咱们说到了如今的前端江湖早已是框架三分天下的格局。这其中的AngularJS是根据MVC模式被创建的，而React和Vue都是根据MVVM模式被创建的。

这时候你可能会问了，MVC和MVVM模式是个什么呢？为了让咱们更好地了解Vue框架，这一回咱们就来说一说有关MVX的内容。

MVX的中的X 

说到这MVX，其中最为关键的是X，它其实并没有什么具体的含义。MVX中的X主要代表了从MVC到MVP，再到MVVM模式的发展历程。

之所以出现这些开发模式的原因，主要是因为在开发中进行分层的目的，让每一层都各司其职，而每一层之间又要尽量地低耦合。

这低耦合呀，是咱们软件开发设计中的一个专业术语。具体什么意思呢？就是说相互之间的联系很少。这就好比咱们平常用的电器和插座的关系，就算换了插座电器还是一样正常的工作。也就是说，电器并不依赖哪一个插座，只要是插座就行。这种关系就可以叫做低耦合。

说到这块，咱们多说两句了。你可千万别以为软件开发是个多么专业的、抽象的，其实咱们在开发中学习的很多模式啊、原理啊，都是源自于生活。不是有那么句话嘛，源于生活，又高于生活。

闲言少叙，咱们书归正传。

说明白了什么是MVX了之后，接下来，咱们就得一一来说一说MVC、MVP和MVVM。

MVC  

头一个要说的，是MVC。MVC其实是个缩写，它的全称是Model-View-Controller。最早是出现在服务器端开发领域中，AngularJS把这个 设计模式 应用到了前端开发中而已。

那MVC分别都表示什么呢？Model说的是模型层，负责来处理数据内容的。View说的是视图层，负责展示数据内容给用户。这最后一个Controller说的是控制层，负责处理和用户之间交互的逻辑。

再具体一点，这三层之间是什么关系，以及每一层起到的作用是什么呢？正所谓一图胜千言，咱们先来看一张图吧：

通过这张图，我们可以很清楚地看出在MVC模型的执行流程是这样的：

1. 用户向Controller层进行输入，Controller层接收用户输入的数据。比如是一个登陆页面的话，用户输入的就是用户名和密码，Controller层接收用户输入的用户名和密码。

2. Controller层接收用户输入的数据完毕后，判断是哪一种业务逻辑，并去执行Model层的业务逻辑。比如是登陆的话，Controller层会通过判断知晓，并执行Model层对应的逻辑。

3. Model层执行完毕对应业务逻辑和数据处理后，根据结果选择对应的View层。

4. View层根据Model层选择的视图，并结合处理的结果，一并展示给用户。

5. 用户看到反馈的结果后，可以根据结果进行下一步输入操作，即重新执行第一步。

由此MVC模式形成了一个闭环操作。

MVP 

了解了MVP模型之后，接下来咱们再来说一说MVP模型。MVP模式是从MVC模式演变而成的。从名字上咱们可以看出，MVP和MVC的区别就在于把MVC中的C换成了P。

这个P又是什么意思呢？它表示Presenter，也可以被称为控制层。MVP中的这三层是什么关系，以及每一层起到的作用又是什么呢？咱们还是先来看一张图吧：

通过这张图，我们可以很清晰地看到，MVP模式和MVC模式最主要的区别在于MVP模式中View层与Model层之间的通信必须通过Presenter层完成。它并不像MVC模式中Model层直接与View层进行通信。

接下来，咱们再来说一说MVP模式的执行流程：

1. 用户想View层进行输入，View层将用户输入的数据传递给Presenter层。

2. Presenter层接收到用户数据之后，判断是哪一种业务逻辑，并执行对应的Model层。

3. Model层执行相应业务逻辑之后，将处理的结果返回给Presenter层，Presenter层根据响应的结果，决定选择对应的View层。

4. View层根据Presenter层选择的视图，并合并处理结果，一并展示给用户。

也就是说，在MVP模式中，Presenter层彻底地将View层和Model层进行了隔离。这样做的好处有这么几点：

1. View层与Model层进行分离，符合软件设计中的低耦合原则。

2. 将所有的业务逻辑处理集中在Presenter层，可以更高效地使用模型。

3. 提高了Presenter层的复用性。也就是说，一个Presenter层可以用于多个View层。

4. 更方便地对Presenter层进行单元测试。

地球上的万物都是在不断地进化，咱们对世界的理解也在不断地进化。这个MVP模型就是从MVC模型的基础上进化而来的。

MVVM

说到这啊，终于要说说咱们的主角MVVM了。可能你会问了，为什么MVVM是主角呢？

咱们说了，这套”书“说的是框架Vue，Vue是典型的MVVM框架。这么一说，你应该明白了，理解了MVVM模型对咱们学习Vue框架是很有帮助的。

咱们闲言少叙，书归正传。

MVVM模式只是将MVP模式中的P改为了VM（ViewModel）。所以，MVVM模式是由Model层、View层和ViewModel层组成。其中ViewModel层是View层和Model层之间通信的桥梁。

MVVM模式的与MVP模式是比较相近的，核心是ViewModel层。还是那句话，一图胜千言，咱们还是先来看一张图吧：

MVVM模式具体应用在前端开发领域的框架（以 Vue.js 为例）中，就演变成了下面这张图的样子：

看到了上面这张图，可能你会发现有些是比较熟悉的，比如DOM、DOM Listeners等等这些内容。这样一个应用于前端开发的MVVM模式的执行流程又是怎么样子的呢？

下面咱们就来说一说：

1. 用户向View层输入数据，View层接收到用户输入的数据。而这个View层多是HTML页面，根据HTML页面生成相应的DOM树结构。

2. ViewModel层通过DOM的事件监听器来监听用户对View层的操作，并将用户输入的数据接收。判断是哪一个业务逻辑，并执行对应的Model层。

3. Model层执行完毕之后，通过ViewModel层的数据绑定，将结果返回给View层。

4. View层将结果展示给用户。

咱们接下来要学习的Vue框架，实际上就承担了MVVM模式中的ViewModel层。换句话讲，咱们使用Vue框架开发前端时，只需要关注View层和Model层就可以了。