开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第29天，点击查看活动详情

前言

vue中采用的是MVVM设计模式，除了MVVM还有MVC、MVP设计模式，它们各自设计思路、结构是需要我们了解，它不光会帮助我们加深对vue的理解，而且这也是一个常见的面试题。

MVVM

MVVM是三个英文单词的缩写：

• M——Model表示的数据模型，我们写的数据以及相关逻辑都在Model中。
• V——View表示视图，也就是页面，将数据展示出来。
• VM——ViewModel，核心层，它能够监听Model数据的改变，根据改变去更新View中的数据，并且处理用户的交互操作。简单来说VM层就是M与V之间的桥梁。 vue采用的就是这种模式，双向绑定就是Model与ViewModel之间的关系，同时View中的操作也会通过ViewModel与Model层进行同步。比如在input中绑定的数据，我们在代码中改成数据，页面上渲染的也会同步改变，而在input输入数据，在代码中的数据就是输入的数据。这就是MVVM设计模式的效果，这个设计模式让我们开发起来更加方便，我们只需要书写Model层的数据与业务逻辑就行。同时因为双向绑定的缘故，该模式下的项目内存消耗大，改bug也不好定位原因。

MVC

MVC跟MVVM相似，MVVM是MVC的升级版：

• M——Model，存储数据。
• V——View，视图层。
• C——Controller，用来负责用户的交互工作，当用户操作页面时，Controller会操作Model的数据，然后Model操作完之后再去让View更新。Controller也是M与C之间的纽带，不同于MVVM的双向，MVC中的View需要Model的操作，View与Model之间应用了观察者模式。对比MVVM，它的V与M之间的耦合性高，开发起来没那么方便。

MVP

MVP与MVC不同的是第三个缩写： P——Presenter，P就是V与C之间的桥梁，不同于C，P将M与C的变化结合到一起，这样两者就能做到同步更新，这也相当于对V与C进行了解耦，之所以要解耦就是因为逻辑复杂的时候，代码就会很混乱，开发也会变得越来越难。MVP会增加项目复杂度，对于项目设计者的要求也高。

总结

以上就是常见三种模式的思路及各自的缺点，整体而言vue采用的模式还是很不错的，而且开发者也一直再追求着性能。