摘要：模式的目的是实现动态的程序设计，简化程序后续的修改和扩展过程，并且使模块能够被重复利用。视图的可视化表示，表示当前状态的视图。出现于年，最大变化在于代替了。其关键改进是数据绑定，也就是说，的数据状态发生变化可以直接影响，反之亦然。
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允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对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 出现于 2005 年，最大变化在于 VM(ViewModel)代替了 C(Controller)。其关键“改 进”是数据绑定(DataBinding)，也就是说，View 的数据状态发生变化可以直接影响 VM，反之 亦然。这也可以说是 AngularJS 的核心特色之一。
MVVM框架与MVC框架的主要区别有两点：
1、实现数据与视图的分离
2、通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。
MVVM的实现主要是三个核心点：
响应式：vue如何监听data的属性变化（Object.defineProperty）
模板解析：vue的模板是如何被解析的
渲染：vue模板是如何被渲染成HTML的
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105760.html
摘要：所以我查了很多的材料，希望能从自己的角度上用通俗的语言阐述前端框架的演变。现在，前端页面会有很多复杂的交互逻辑和用户体验，如果还使用之前老的框架，对层的操作就会难以维护，这就是前端框架要不断演变的主要原因。 说实在的，我不觉得MVC，MVVM这些框架有什么难的，直到我想写一篇文章去系统的阐述它们。我遇到了以下几个问题，1.不同的文章说的南辕北辙 2.没有一个清晰的大纲和框架分类。所以我...
摘要：所以我查了很多的材料，希望能从自己的角度上用通俗的语言阐述前端框架的演变。现在，前端页面会有很多复杂的交互逻辑和用户体验，如果还使用之前老的框架，对层的操作就会难以维护，这就是前端框架要不断演变的主要原因。 说实在的，我不觉得MVC，MVVM这些框架有什么难的，直到我想写一篇文章去系统的阐述它们。我遇到了以下几个问题，1.不同的文章说的南辕北辙 2.没有一个清晰的大纲和框架分类。所以我...
摘要：还有一点比较重要的是，如何在快速迭代的软件开发周期内，去解放生产力。于是就会大量涌现很多优秀的开源框架和扩展库，去解决现实生活中的实际问题。而这一切都是在朝着提高开发效率，降低维护成本而前进。结合书中的观点去总结和思考。 关于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 简单小巧的核心（代码压缩后大...
摘要：还有一点比较重要的是，如何在快速迭代的软件开发周期内，去解放生产力。于是就会大量涌现很多优秀的开源框架和扩展库，去解决现实生活中的实际问题。而这一切都是在朝着提高开发效率，降低维护成本而前进。结合书中的观点去总结和思考。 关于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 简单小巧的核心（代码压缩后大...
阅读 1268·2021-11-11 10:57
阅读 3690·2021-09-07 10:10
阅读 3429·2021-08-03 14:03
阅读 3046·2019-08-30 13:45
阅读 659·2019-08-29 11:19
阅读 1020·2019-08-28 18:07
阅读 3066·2019-08-26 13:55
阅读 774·2019-08-26 12:17
