谈谈前端MVC、MVVM设计模式

MV模式的目的是实现动态的程序设计，简化程序后续的修改和扩展过程，并且使模块能够被重复利用。此模式通过简化程序使之变得更为直观。MV不是一种技术 ，而是一种设计理念。MV*模式主要采用分层的思想来降低耦合度，从而使系统更加灵活，扩展性更强。它通过关注数据界面分离，来鼓励改进应用程序结构。
常见的两种MV*模式是MVC和MVVM，他们具有一些相同点：
Model（模型）：负责保存应用数据，和后端交互同步应用数据，或校验数据。Model不涉及用户界面，也不涉及表示层，而是代表应用程序可能需要的独特形式的数据。当Model改变时，它会通知它的观察者(如视图)作出相应的反应。总的来说，Model 主要与业务数据有关，与应用内交互状态无关。
View（视图）：Model 的可视化表示，表示当前状态的视图。前端View负责构建和维护DOM元素。
View 对应用程序中的 Model 和 Controller 的了解是有限的，更新 Model 的实际任务都是在 Controller 上。
用户可以与 View 交互，包括读取和编辑 Model，在 Model 中获取或设置属性值。
不同点在于：
Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
VM（视图模型）：通过数据绑定，自动完成M、V之间的更新
那么究竟两者有什么区别？

MVC

如图，实线代表方法调用，虚线代表事件通知。

MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新（观察者模式）。

这张图把MVC分为三个独立的区域，你瞧C和V以及C和M之间的白线，一部分是虚线一部分是实线对吧，这就表明了引用关系：C可以直接引用V和M，而V和M不能直接引用C，至少你不能显式的在V和M的代码中去写和C相关的任何代码，而V和M之间则是双黄线，没错，它们俩谁也不能引用谁，你既不能在M里面写V，也不能在V里面写M。
但是，MVC框架允许View和Model直接进行通信！所以，可能会出现特别混乱的情况出现！以Backbone 为例，由于 Model 对外直接暴露了 set 和 on 方法，导致 View 层可以随意改变 Model 中的值，也可以随意监听 Model 中值的变化。

MVVM

MVVM 出现于 2005 年，最大变化在于 VM(ViewModel)代替了 C(Controller)。其关键“改 进”是数据绑定(DataBinding)，也就是说，View 的数据状态发生变化可以直接影响 VM，反之 亦然。这也可以说是 AngularJS 的核心特色之一。

MVVM框架与MVC框架的主要区别有两点：
1、实现数据与视图的分离
2、通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。

MVVM的实现主要是三个核心点：

响应式：vue如何监听data的属性变化（Object.defineProperty）
模板解析：vue的模板是如何被解析的
渲染：vue模板是如何被渲染成HTML的