现在是市面上使用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. Windows平台下Oracle监听服务启动过程中日志输出

    Windows平台下Oracle监听服务启动过程中日志输出记录. 日志目录:D:\app\Administrator\diag\tnslsnr\WIN-RU03CB21QGA\listener\tra ...

  2. 使用JS分页 <span> beta 3.0 完成封装的分页

    <html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...

  3. 如何快速部署Oracle Database

    Oracle Database在Linux系统上的安装是每一个初学者都必须面临的问题,只有正确的配置好了环境,才能进行后续的深入学习.本文旨在说明如何快速的部署Oracle的单实例环境,对于初学者,还 ...

  4. 398 Random Pick Index 随机数索引

    给定一个可能含有重复元素的整数数组,要求随机输出给定的数字的索引. 您可以假设给定的数字一定存在于数组中.注意:数组大小可能非常大. 使用太多额外空间的解决方案将不会通过测试.示例:int[] num ...

  5. SCRIPT70: 没有权限

    主要原因:iframe安全而引发的问题,浏览器中js是没有垮域访问的权限的.如果用到iframe首先确保不垮域,或者不用iframe以绕开这个问题. 另外在jquery的早期版本中如:jquery-1 ...

  6. Ajax动态加载数据

    前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...

  7. Java 8 (6) Stream 流 - 并行数据处理与性能

    在Java 7之前,并行处理集合非常麻烦.首先你要明确的把包含数据的数据结构分成若干子部分,然后你要把每个子部分分配一个独立的线程.然后,你需要在恰当的时候对他们进行同步来避免竞争,等待所有线程完成. ...

  8. .net 反射初体验

    一.获取对象中的所有属性 Type是.net定义的一个反射的类.通过反射获取到对象的所有属性,然后根据属性获取对象对应属性所对应的值. 使用PropertyInfo,请引用命名空间using Syst ...

  9. [ HDOJ 3826 ] Squarefree number

    \(\\\) \(Description\) \(T\)组数据,每次给出一个正整数 \(N\) ,判断其是否能被任意一个完全平方数整除. \(T\le 20,N\le 10^{18}\) \(\\\) ...

  10. python与arduino串口通讯对接opencv实现智能物品分拣

    2018-05-0118:53:50 先上图: 再来视频: http://v.youku.com/v_show/id_XMzU3NzAwNzMyNA==.html?spm=a2hzp.8244740. ...