MVVM那些事儿(一)

最新推荐文章于 2022-06-25 22:11:52 发布
置顶 最新推荐文章于 2022-06-25 22:11:52 发布
阅读量220 收藏
点赞数 1
分类专栏： android 文章标签： android mvc mvp mvvm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37389474/article/details/54706876
版权

要交待清楚mvvm(Model-View-ViewModel)框架，就有必要交待一下mvvm的由来，今生，以及来世。那好，首先感谢大家，我们慢慢来 - - >

我想MVC – > MVP – > MVVM 应该有一个衍变过程

MVC:

这里写图片描述

这里就以Android为例 ：
View: XML布局文件，自定义View
Model:实体模型(数据的获取、存储、数据状态变化)
Controller：对应的Activity，Fragment等，处理数据、业务、UI等

这里，我们就会产生分歧了，activity等的不是可以放在view层吗？项目分包时，将activity放在view层，那不是我们的view和model不就可以连线了？
这里写图片描述

事实上，Android本身的设计还是符合MVC架构的，但是Android中纯粹作为View的XML试图功能太弱，我们大量处理View的逻辑只能写在Activity中。这样Activity就充当了View和Controller两个角色。之后我们开发中的代码动辄千行，我想大家都遇到过……

于是，在与四大组件中Service相较而论，带UI组件的Activiy，作为UI功能的载体，自然可以作为View。于是，

MVP:

这里写图片描述

我能为了把activity、fragment等作为单纯意义上的视图层，而 逻辑处理，放在一个单独的类里，取名叫做Presenter

View:对应于Activity、Fragment和XML，负责View的绘制以及与⽤户交互
Model:依然是实体模型
Presenter:负责完成View与Model间的交互和业务逻辑

相比MVC我们的MVP更加方便灵活，可以整体架构采用MVP，也可以单一业务线采用MVP。为了降低Presenter和View之间的依赖关系，MVP 还提倡通过⼀个抽象的View接⼝（不是真正的View层）将 Presenter 与真正的View层进⾏解耦。Persenter持有该View接⼝对象，对该接⼝进⾏操作，⽽不是直接操作View层。这样View层对Presenter 层的依赖变成了单⽅向的依赖，View 的变化不会传递到 Presenter 层来(后期view需求变更，不会直接影响presenter层的大幅度变动，这里也不详细叙述低耦合高内聚的事情了，软件开发的基本常识)。更有甚者提倡为View、Presenter、Model 都定义抽象的接⼝。

这里我们就不再深入细说了，要跑题了啊。。。（改日再撩） ^ ^

往往，鱼和熊掌不可兼得，MVP解决问题的同时，也会带来新的问题 - - >①大量接口带来的代码碎片化（面向接口编程的通病） ② MVP是UI驱动式模型。对于UI输入引起数据变化，又或者数据变动引起UI的变化，就需要我们手动调用P层接口或V层接口，需要考虑大量的问题（UI变化是否在主线程等等…），显得过于繁琐。

于是。。

MVVM:

这里写图片描述

View:对应于Activity、Fragment和XML，负责View的绘制以及与⽤户交互，⽐较复杂的动画效果等都可以放在Activity中
Model:还是实体模型
ViewModel:负责完成View与Model间的交互，负责业务逻辑

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点
① 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
② 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
③ 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
④ 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

细心的同学发现，我们把vm层改成presenter不就是MVP
吗。其实MVVM就是MVP的衍化，不过她采用了双向绑定机制哦，时V层与M层交互不再频繁使用接口式编程我们所考虑的问题更少了，我们专注于设计和用户体验

哈哈，那么
关于DataBing我们下期见

单刷女boss
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MVVM案例Demo示例
09-01
MVVM案例Demo示例
什么是MVVM
热门推荐
春风化雨
12-13 8万+
1、什么是MVVM MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。 MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewM.
mvvm是什么？
weixin_61434466的博客
04-25 3776
1、总结 一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v(view层)实现数据的双向绑定 2、mvc和mvvm的关系？ 改进版 数据分离 视图模型层 c（控制层）被换成了vm（viewmodel）层 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。 mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可 3.MVVM模式的优点以及与MVC模式的区别? MVVM模式的优点： 1、低耦合.
MVVM的理解
weixin_47227886的博客
04-14 4341
MVVM 是 Model-View-ViewModel 的缩写。 Model:代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View: 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过Vie...
mvvm 是什么
weixin_40918145的博客
02-07 6222
MVVM 基本定义 1.MVVM 即 Model-View-ViewModel 的简写。即模型-视图-视图模型。 2.模型（Model） 指的是后端传递的数据。 3.视图(View)指的是所看到的页面。 4.视图模型(ViewModel)是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向： 一是将模型（Model）转化成视图 (View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。 ​ 二是将视图 (View)转化成模型(Model)，即将所看
学习Vue6月29日
毕业势必进大厂的博客
06-29 253
Vue的特点 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM Vue.js安装 方式1：直接CDN引入 可以选择引入开发环境版本还是生产环境版本 <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src=.
WPF的MVVM模式详解（一)
最新发布
02-20
该资源可以给大家做参考。里面包含了四个dll引用。需要时可以拷贝出来使用。
Mvvm
11-12
主要是学习Mvvm，自己做的小demo
一个WPF MVVMdemo
06-02
一个自己写的简单的MVVMdemo，没有使用任何依赖注入框架，完全解耦View和ViewModel
mvvm mvvm mvvm js
02-24
mvvm mvvm mvvm mvvm mvvm js
mvvm是什么?
junny_zz的博客
06-25 1541
mvvm
什么是MVVM?
weixin_51348217的博客
01-28 5759
什么是MVVM? MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。 View层是视图层，也就是用户界面。前端主要由HTML和CSS来构建； Model层 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端的提供的API接口； ViewModel层是视图数据层，一个同步View和Model的对象。 在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此Vi
什么是mvvm？
weixin_33712987的博客
06-23 388
MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Mode...
面试题之: 什么是MVVM？
simoon's的博客
11-23 1万+
考察点: 如何理解MVVM? 如何实现MVVM? 你是否读过VUE源码? 面试题1: 说下使用jquery和Vue的区别？ 答： 数据和视图的分离 dom 和 js没有分离，真正的内容会混合在js中由js创建 不符合开放封闭原则。对扩展开放，对修改封闭 以数据驱动视图 jquery直接修改视图 vue只需要修改数据，框架自动修改视图 面试题2: 说一下对MVVM的理解 面试题3: ...
什么是MVVM，MVVM和MVC的区别？
wh_xmy的博客
08-30 1万+
1. Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现...
什么是 MVVM 模式？
binglan520的专栏
05-03 3万+
一个常规软件或者 APP 一般都是服务于某种商业或者非商业述求，我们平常称为“业务需求”。随着业务需求的扩张、一个软件会变得越来越庞大，越来越复杂。所以一般都会有一套完整的架构设计、研发流程以及质量管理体系来保证整个研发过程。关于“架构设计”，这是一个很大的话题，伴随着我们的业务需求，它会涉及到方方面面，我们今天来谈一谈其中的一个基础环节——MVVM模式。 经典的 MVC 模式 MVC 是最常...
MVVM的一些理解
我没有博客的博客
02-17 3427
最新开始做一个新的项目，由于之前项目越来越大，后来有些类会变得特别臃肿。所以这次在开始之前想要研究一下其他架构。经过一番实践，抛弃了MVC，选择了MVVM。 但是不代表MVC不好，其实我个人更喜欢MVC，因为简单省事。如果你的项目没有那么大，没有那么多的业务逻辑。MVC最合适你了，不用考虑更换了。 首先，MVC和MVVM的区别，从字面上看似乎是把C变成了VM这么简单。其实不然，是把C拆
写一个mvvm demo
04-25
好的，下面是一个简单的MVVM Demo示例，主要实现了数据绑定和视图模型。 首先，我们需要创建一个模型类和视图模型类。 模型类： ``` class User { String name; int age; User(this.name, this.age); } ``` 视图模型类： ``` import 'package:flutter/material.dart'; import 'user.dart'; class UserViewModel extends ChangeNotifier { User _user; UserViewModel(User user) { _user = user; } String get name => _user.name; set name(String value) { _user.name = value; notifyListeners(); } int get age => _user.age; set age(int value) { _user.age = value; notifyListeners(); } } ``` 在视图上，我们可以将数据绑定到`UserViewModel`， ``` import 'package:flutter/material.dart'; import 'package:mvvm_demo/user.dart'; import 'package:mvvm_demo/user_view_model.dart'; import 'package:provider/provider.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'MVVM Demo', home: ChangeNotifierProvider<UserViewModel>( create: (context) => UserViewModel(User('User Name', 20)), child: HomePage(), ), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { final userViewModel = Provider.of<UserViewModel>(context); return Scaffold( appBar: AppBar( title: Text('MVVM Demo Home'), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: EdgeInsets.all(16.0), child: TextField( decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Name', ), onChanged: (value) { userViewModel.name = value; }, ), ), Container( margin: EdgeInsets.all(16.0), child: TextField( decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Age', ), onChanged: (value) { userViewModel.age = int.parse(value); }, ), ), Container( margin: EdgeInsets.all(16.0), child: Text( 'User Name: ${userViewModel.name} \nUser Age: ${userViewModel.age}'), ), ], ), ); } } ``` 在这个示例中，我们使用`provider`库来管理视图模型的状态，当视图模型中的数据发生变化时，我们可以通过`notifyListeners()`方法通知视图重新渲染。 希望这个简单的MVVM Demo示例对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值