现在是市面上使用MVVM模型越来越多,相关的前端框架的选择也相应增多。

那么什么是MVVM模型,它和传统MVC模型有什么区别,接下来我们来总结探讨一下。

MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型(Model)指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将视图(View)转化成模型(Model),即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C,只是在MVC的基础上增加了一层VM,只不过是弱化了C的概念,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用,使开发更高效,结构更清晰,增加代码的复用性。

VUE官方,也介绍了MVVM模型相关框架(如Vue 、 React、AngularJS、Knockout、Polymer等)的对比优缺点,可以参考,https://cn.vuejs.org/v2/guide/comparison.html

MVC和MVVM的区别的更多相关文章

  1. 第四十五课:MVC,MVP,MVVM的区别

    前端架构从MVC到MVP,再到MVVM,它们都有不同的应用场景.但MVVM已经被证实为界面开发最好的方案了. MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/P ...

  2. 浅谈MVC、MVVM的区别

    一.概述 MVC,MVP,MVVM是三种常见的前端架构模式(Architectural Pattern),它通过分离关注点来改进代码组织方式.不同于设计模式(Design Pattern),只是为了解 ...

  3. IOS MVC与MVVM的区别

    MVVM是对胖模型进行的拆分,其本质是给控制器减负,就是把一些弱业务放到VM中去处理. MVC是一切设计的基础,所有新的设计模式都是基于MVC的改进.

  4. mvc和mvvm的区别?

    源自:https://segmentfault.com/q/1010000000534091?_ea=178721 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与 ...

  5. MVC,MVP,MVVM的区别

    MVC模型关注的是Model的不变,所以,在MVC模型里,Model不依赖于View,但是 View是依赖于Model的.不仅如此,因为有一些业务逻辑在View里实现了,导致要更改View也是比较困难 ...

  6. 理解MVC/MVP/MVVM的区别

    转载至[http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html] MVC 所有的通信都是单向的. M(Model)V(View)C(Contro ...

  7. mvc和mvvm区别

    mvc和mvvm区别 MVC和MVVM的区别其实并不大.都是一种设计思想. 主要就是MVC中Controller演变成MVVM中的viewModel. MVVM主要解决了MVC中大量的DOM操作使页面 ...

  8. MVC和MVVM

    MVC和MVVM的qu'bie 1. Mvvm定义MVVM是Model-View-ViewModel的简写.即模型-视图-视图模型.[模型]指的是后端传递的数据.[视图]指的是所看到的页面.[视图模型 ...

  9. (一)mvc与mvvm设计模式

    前沿:了解设计模式对我们而言,具有很大意义,对语言没有限制,它适用于任何语言,是一种变成思想.设计模式最初有四人帮提出,有兴趣的同学可以去了解下,今天给大家主要分析mvc与mvvm设计模式 一.mvc ...

随机推荐

  1. [ POI 2010 ] Antisymmetry

    \(\\\) \(Description\) 给出一个长度为 \(N\) 的二进制串,定义一个子串是优秀的,当且仅当其正着看,和倒着按位取反后看结果是一样的,求整个串有多少个优秀的子串. \(N\le ...

  2. vue-devtools是vue浏览器调试工具

    开vue官网在vue-生态系统-工具可以看到vue-devtools这个工具: vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我 ...

  3. phpstorm设置代码片段

    tab 向后推进 shift+tab 向前推进 ctrl+d 复制整行 ctrl+Y删除整行 代码片段就是代码快捷键,如果你设置了www.baidu.com这些内容,但是不想一直重复的打,可以设置个代 ...

  4. Java 基础入门随笔(10) JavaSE版——单例设计模式

    设计模式:对问题行之有效的解决方式.其实它是一种思想. 1.单例设计模式. 解决的问题:就是可以保证一个类在内存中的对象唯一性.(单个实例) 使用单例设计模式需求:必须对于多个程序使用同一个配置信息对 ...

  5. HDU_1166_敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  6. eBPF监控工具bcc系列一启航

    eBPF监控工具bcc系列一启航 在eBPF篇中,我们知道虽然可用 C 来实现 BPF,但编译出来的却仍然是 ELF 文件,开发者需要手动析出真正可以注入内核的代码.工作有些麻烦,于是就有人设计了 B ...

  7. 微信小程序中使用ECharts 异步加载数据 实现图表

    <!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...

  8. MFC 程序 手写创建顺序

    MFC 程序 手写创建顺序 1.继承CWinApp类 覆盖 class CMyApp : public CWinApp { virtual BOOL InitInstance(); } BOOL CM ...

  9. Python学习-比较运算符和逻辑运算符

    比较运算符 == 等于 - 比较对象是否相等 print(3 == 4); //False != 不等于 - 比较两个对象是否不相等 print(3 != 4); // True    <> ...

  10. python环境配置以及基本知识

    python---一种解释型语言(脚本语言),具有代码简洁.入门简单.开发效率高的优点.当然不可避免的有着暴露源码.执行效率低的缺点,但毕竟瑕不掩瑜,在数据是无比宝贵的财富的当下,无疑是一门优秀的编成 ...