MVVM模式

视图层和数据层的双向绑定,让我们无需再去关心DOM操作的事情,更多的精力放在数据和业务逻辑上去

  • MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。

    • Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;
    • View 代表UI 组件,它负责将数据模型转化成UI 展现出来,
    • ViewModel 是一个同步View 和 Model的对象。
  • 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的,因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

  • ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。


Vue.js优点 - 面向数据编程

  • 低耦合。 视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  • 可重用性。 你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
  • 独立开发。 开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
  • 可测试。 界面素来是比较难于测试的,而现在测试可以针对ViewModel来写易用灵活高效

Vue - MVVM模式及优点的更多相关文章

  1. Vue中MVVM模式的双向绑定原理 和 代码的实现

      今天带大家简单的实现MVVM模式,Object.defineProperty代理(proxy)数据   MVVM的实现方式: 模板编译(Compile) 数据劫持(Observer) Object ...

  2. 浅谈MVVM模式和MVP模式——Vue.js向

    浅谈MVVM模式和MVP模式--Vue.js向 传统前端开发的MVP模式 MVP开发模式的理解过程 首先代码分为三层: model层(数据层), presenter层(控制层/业务逻辑相关) view ...

  3. 前端MVVM模式及其在Vue和React中的体现

    MVVM相关概念 Mvvm 前端数据流框架精讲 1) MVVM典型特点是有四个概念:Model.View.ViewModel.绑定器.MVVM可以是单向绑定也可以是双向绑定甚至是不绑定 2) 绑定器: ...

  4. vue的MVVM模式和生命周期总结(一)

    一.MVVM模式 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel ...

  5. Vue的mvvm模式

    传统的MVC模式: Model:模型-->负责数据存储 View:视图-->负责页面展示 Control:控制器-->事件交互(根据视图与用户交互后改变数据) Vue的MVVM模式: ...

  6. VUE中的MVVM模式

    1.传统MVP模式:业务逻辑相关的控制层 M:模型层,ajax请求 V:dom层,视图 P:控制器.js代码之类的 2.MVVM MVVM模式主要操作数据层,代码减少量是MVP的30%甚至70%

  7. 转:界面之下:还原真实的 MVC、MVP、MVVM 模式

    前言 做客户端开发.前端开发对MVC.MVP.MVVM这些名词不了解也应该大致听过,都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式.网上很多文章关于这方面的讨论比较杂乱,各种MV*模式 ...

  8. MVC,MVP 和 MVVM 模式如何选择?

    转摘:http://www.linuxidc.com/Linux/2015-10/124622.htm 前言 做客户端开发.前端开发对MVC.MVP.MVVM这些名词不了解也应该大致听过,都是为了解决 ...

  9. MVC、MVP、MVVM 模式

    一.前言 做客户端开发.前端开发对MVC.MVP.MVVM这些名词不了解也应该大致听过,都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式.网上很多文章关于这方面的讨论比较杂乱,各种MV* ...

随机推荐

  1. MacOS JMeter安装(多图)

    本文基于 MacOS 环境下进行 Jmeter 的安装. 一.下载JMeter 本文选用 JMeter 5.3 版本安装,5.3 版本需要 JDK 1.8 + 版本环境. Jmeter 5.3 下载: ...

  2. DDD(领域驱动设计)--战术设计

    前言 战术设计 战略设计为我们提供一种高层视野来审视我们的软件系统,主要包括领域/子域.通用语言.限界上下文和架构风格等概念, 而战术设计则将战略设计进行具体化和细节化,它主要关注的是技术层面的实施, ...

  3. Python中判断字符串是否为数字的三个方法isdecimal 、isdigit、isnumeric的差别

    isdecimal .isdigit.isnumeric这三个字符串方法都用于判断字符串是否为数字,为什么用三个方法呢?他们的差别是什么内? isdecimal:是否为十进制数字符,包括Unicode ...

  4. 转:python提取浏览器Cookie

    在用浏览器进行网页访问时,会向网页所在的服务器发送http协议的GET或者POST等请求,在请求中除了指定所请求的方法以及URI之外,后面还跟随着一段Request Header.Request He ...

  5. 【.Net Core】 使用 Nginx 发布 .Net Core 3.1 项目至LInux(Centos7)。

    前置博客(博客中使用的项目来自于此): [Docker] .Net Core 3.1 webapi 集成EF Code First,使用MySql进行业务操作 .配置swagger (三) 环境:.N ...

  6. NOI2008 志愿者招聘

    文化课 + 竞赛双废物又来水题解了. 首先,对于题干中的人,很像网络流中的流量,但是他有一个每天人数的下限,我从网上借鉴(chaoxi)到了两种思路: 把下界限制转化为一条边的流量下界,这样就是最小费 ...

  7. oracle 时间段查询

    <select id="selectByRzrq" resultMap="BaseResultMap" parameterType="java. ...

  8. 哔哩哔哩批量采集器(支持windows和mac)

    链接:https://pan.baidu.com/s/1jW2ea0Cl1xL5xN9DuB8Fcw  密码:klyw

  9. .Net Core Excel导入导出神器Npoi.Mapper

    前言 我们在日常开发中对Excel的操作可能会比较频繁,好多功能都会涉及到Excel的操作.在.Net Core中大家可能使用Npoi比较多,这款软件功能也十分强大,而且接近原始编程.但是直接使用Np ...

  10. 1.pipeline原理

    redis基本语法:https://www.cnblogs.com/xiaonq/p/7919111.html redis四篇:https://www.cnblogs.com/xiaonq/categ ...