美文网首页vue
从MVC到MVVM

从MVC到MVVM

作者: 凉城十月 | 来源:发表于2021-11-18 16:28 被阅读0次

MVVM

特性

模型-视图-视图模型(model-view-viewmodel,MVVM),实质上是模型-视图-控制器(model-view-controller,MVC)的改进版。
其中最重要的特性是数据绑定data binding),此外还包括依赖注入、路由配置、数据模板等一些特性。

MVC

起源

MVC模式在Web 1.0时代曾被广泛应用于Web架构中,然而其诞生的时间却比Web早几年。
最初,MVC被应用于桌面程序中,在PHP、JSP等脚本语言诞生后,也逐渐成为Web开发的主流模式。

View 视图层

View视图层是用户能够看到并进行交互的客户端界面,如桌面应用的图形界面、浏览器端渲染的网页等;

Model 模型层

Model指业务模型,用于计算、校验、处理和提供数据,但不直接与用户产生交互;

Controller 控制器

Controller控制器则负责收集用户输入的数据,向相关模型请求数据并返回相应的视图来完成交互请求。


MVC模式

MVC模式实现了M和V的代码分离,M专注于数据,V专注于表达,C则在M和V之间架起了一座桥梁。
即使采用同一个Model的数据,如果调用不同的View,也会得到不同的页面呈现。

MVC优点
  • 减少了Model层的冗余代码
  • 使得Model和View更加灵活和易于维护
  • 同时也简化了项目的架构和管理。

MVVM

经过技术更迭,MVC渐渐的演变出更多的形态,有的开发者也会将其统一称作“MV*模式”,MVVM则是其中的一种。

ViewModel

MVVM架构的主要目的是分离视图(View)和模型(Model),ViewModel层封装了界面展示和操作的属性和接口。
通过数据绑定,将View和ViewModel关联在一起,当ViewModel中的数据发生变化时,View也会同步进行更新。


MVVM模式
具体实现

MVVM模式解耦了视图和模型。

  1. 在模式中,每一个View都有对应的一个ViewModel,同时ViewModel与Model建立联系。
  2. 当接收到用户请求后,ViewModel获取模型响应的数据,并通过数据绑定将相应的视图页面重新渲染。
  3. 模型层的数据只需要传入ViewModel层即可实现视图的同步更新
    从而实现了视图和模型之间的松散耦合。
MVVM灵活性

MVC是系统架构级别的,而MVVM是用于单页面上的。
因此,MVVM的灵活性要大于MVC的。

如果将这里的M抛开,只看VVM的话,那这就是一个组件的设计模式。
所以,MVVM模式也是组件化的开发的最佳实践。

相关文章

  • React、Vue学习总结

    一、 从MVC到MVVM 从MVC到MVVM 1. (客户端)MVC调用关系 用户通过操作view调用contro...

  • 从MVC到MVVM

    前言: 前一段时间做音乐播放器的项目用到了MVC思想,遇到了很多的痛点,虽然将数据、操作、视图分离了,但是依然离不...

  • 从MVC到MVVM

    简述MVVM MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表...

  • 从MVC到MVVM

    MVC思想写代码 MVVM思想改写代码

  • 从MVC到MVVM

    MVVM 特性 模型-视图-视图模型(model-view-viewmodel,MVVM),实质上是模型-视图-控...

  • iOS MVC、MVP、MVVM的正确使用姿势

    iOS使用RAC实现MVVM的正经姿势 从MVC到MVVM [http://blog.harrisonxi.com...

  • 从MVC到MVVM(一)

    MVC 任何一个正经开发过一阵子软件的人都熟悉MVC. 它意思是Model View Controller, 其用...

  • [iOS] MVC、MVP、MVVM & ReMVVM

    ※ MVC -> MVP -> MVVM 这部分可能会从MVC->MVP->MVVM都看看,看到几篇不错的文章欢迎...

  • 从MVC到MVVM(初识Vue)

    前言:看本文之前需要了解最基本的MVC思想(附一篇本人之前写的MVC设计模式在JavaScript中的运用 仅供参...

  • 从MVC到MVVM的优势

    本文来自我在知乎上的一个回答:iOS中MVVM相对MVC有何优势? - 浮尘追梦的回答 - 知乎 https://...

网友评论

    本文标题:从MVC到MVVM

    本文链接:https://www.haomeiwen.com/subject/pkodtrtx.html