了解一下MVVM

MVC模式和MVVM的区别,算是很常见的面试题,MVC适合后端框架,对于前端确实不是很合适,于是出现了现在最流行的MVVM模式,其实本质上是MVC的改进版。

MVC到MVVM中间,还有一个模式是MVP,跟MVC几乎一样,唯一的不同就是MVC更新视图的操作是在Model中,而MVP中的Presenter作为中间层,除了基本业务之外,还要有view到model和model更新view的操作。presenter更加复杂了。所以现在MVC的数据流比较倾向于下面这种:

而MVP则是这样的:

对于MVVM,本身的思路跟MVC和MVP有很大一部分是相同的,MVVM改进了controller和presenter,并不是说没有了controller和presenter,而是用viewmodel替代了。在MVP和MVC中,数据渲染视图都是通过操作DOM实现,是手动的。MVVM则是实现了自动化同步。

MVC和MVP中的model要有相关数据和处理数据的逻辑方法,MVVM中的model仅仅是数据,并没有其他操作,就是vue中的data。

MVVM的view不是传统的视图,而是通过模板语法将数据渲染到页面,也就是虚拟DOM的概念。

MVVM中的viewmodel是核心,业务逻辑都在这里面实现,通过数据绑定,当model数据发生变化,viewmodel能监听到,viewmodel改变,也能更新model。由于view其实就是虚拟dom的渲染,也就能更新视图。

不同框架,实现双向数据绑定有一些不同,有数据劫持、发布订阅模式、赃值检查等。最熟悉的vue就是通过数据劫持和发布订阅方式实现的。在vue中,Model就是data里面的数据,view就是template里面的标签,viewmodel就是vue实例new Vue()。通过defineProperty劫持数据,然后发生改变的时候通知订阅者,触发相应的方法。

本人觉得不管是MVC、MVP还是MVVM,有一个核心是不变的,就是M和V是分开的,不同的就是怎么连接这两个,而MVVM确实会更加适合前端,把逻辑和视图分离的更加清晰。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 了解一下MVC

    一直在说MVC和MVVM的区别,现实是连什么是MVC都不知道,于是好好学习了一下MVC。

    wade
  • ES6之变量的解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在一些场景下还是很有用的。

    wade
  • 引用类型

    在JavaScript中引用类型是一种数据结构,将数据和功能组织在一起,或者也称之为类,但是在ECMAScript并不真正具有类,所以我们都把引用类型称之为对象...

    wade
  • 关于架构思想的看法

    目前开发中用到的主流思想主要是MVC 、 MVP、 MVVM这三种思想。前端用的MVVM,后端用的MVC,安卓用的是MVP。具体的每一种使用后面做详细讲解。

    AWeiLoveAndroid
  • iOS面试题:MVVM和MVC的区别

    你可能试着把它放在Model对象里,但是也会很棘手,因为网络调用应该使用异步,这样如果一个网络请求比持有它的model生命周期更长,事情将变的复杂。显然View...

    猿_人类
  • 初识Django

    举个简单的例子,对于一个公司来说,公司中有各个职能部门,每个部门各司其职,通过部门之间的配合来完成工作,这些部门就形成了一个公司的组织架构。从某种意义上来说,公...

    忆想不到的晖
  • View绘制系列(3)-自定义View简介

    经过前面两篇文章的介绍,相信大多数同学已经清楚的认识了View,那么我们来看下自定义View这个主题,在小册简介中,我们已经描述了自定义View的目的,同学们还...

    小海编码日记
  • 解析SDN与实际应用的距离

    目前很多SDN(Software Defined Network,软件定义网络)的解决方案还主要集中在高校、ONF组织、运营商及设备厂商中进行探索研究,多停留在...

    SDNLAB
  • 【优质题解】题号1174:【计算直线的交点数】 (C语言描述)

    题号1174,原题见下图: ? 解题思路: 将n条直线排成一个序列,直线2和直线1最多只有一个交点,直线3和直线1,2最多有两个交点,……,直线n 和其他n...

    编程范 源代码公司
  • sb2.0新版springcloud微服务实战:Consul+Zuul+Feign/Ribbon+Hystrix Turbine+Config+sleuth+zipkin

    本篇文章是springboot2.x升级后的升级springcloud专贴,因为之前版本更新已经好久了,好多人评论可不可以出个新版本,大家一定要注意,这是spr...

    用户2235302

扫码关注云+社区

领取腾讯云代金券