首先我们来了解一下MVC、MVP、MVMM这三大架构模式在前端角度上的理解。

MVC分别是 Model(模型)、View(视图)、Controller(控制器)三个模块。View(视图层)最主要完成前端的数据展示,Controller(控制层)是对数据的接收和触发事件的接收和传递,Model(模型层)则是对数据的储存和处理,再传递给视图层相应或者展示。如下图所示,整个过程是单链条的传递,在前端开发中多将业务逻辑写在View层,使得View层比较厚,而Controller层比较薄。
缺点:
1、 开发者在代码中大量调用相同的 DOM API,处理繁琐 ,操作冗余,使得代码难以维护。

2、大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
  
3、 当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致 Model 发生变化,开发者同样需要将变化的数据同步到Model 中,这样的工作不仅繁琐,而且很难维护复杂多变的数据状态。

MVP是Model(模型)、View(视图)、Presenter(表示器)组成。MVP架构模式最主要是针对Android的MVC架构模式进行改进的,MVP与MVC最不同的一点是M与V是不直接关联的也是就Model与View不存在直接关系,这两者之间间隔着的是Presenter层,其负责调控View与Model之间的间接交互。

MVVM
架构模式最主要是针对前端和iOS的MVC架构模式进行改进的,减轻Controller层或者View层的压力,实现更加清晰化代码。通过对ViewModel层的封装:封装业务逻辑处理,封装网络处理、封装数据缓存等,让逻辑处理分离出来,并且不需要处理Model数据,使得Controller层或者View层结构简单,条理清晰。MVVM模式的优点在于当view和viewmodel的双向绑定,当数据改变后不需要改修改DOM结构。MVVM的实现原理:利用Object.defineProperty(),该方法有get、set两个属性方法,从而获取对象属性的值,给对象属性重新赋值。

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel
之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119353209

视图模板引擎——Vue【双向绑定】原理剖析的更多相关文章

  1. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  2. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  3. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  4. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  5. Vue双向绑定原理(源码解析)---getter setter

       Vue双向绑定原理      大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...

  6. vue 学习二 深入vue双向绑定原理

    vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...

  7. 通俗易懂了解Vue双向绑定原理及实现

    看到一篇文章,觉得写得挺好的,拿过来给大家分享一下,刚好解答了一些困扰我的一些疑惑!!! 1. 前言 每当被问到Vue数据双向绑定原理的时候,大家可能都会脱口而出:Vue内部通过Object.defi ...

  8. vue双向绑定原理

    要了解vue的双向绑定原理,首先得了解Object.defineProperty()方法,因为访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 Object.definePrope ...

  9. Vue双向绑定原理及其实现

    在之前面试的时候被面试官问到是否了解Vue双向绑定的原理,其实自己之前看过双向绑定的原理,但也就是粗略的了解,但是没有深入.面试官当时让我手写一个原理,但是就蒙了

随机推荐

  1. oracle之lsnrctl命令

    采样: [oracle@sh02 ~]$ cat /etc/redhat-release Red Hat Enterprise Linux Server release 6.4 (Santiago) ...

  2. Codeforces Round #306 (Div. 2), problem: (B) Preparing Olympiad【dfs或01枚举】

    题意: 给出n个数字,要求在这n个数中选出至少两个数字,使得它们的和在l,r之间,并且最大的与最小的差值要不小于x.n<=15 Problem - 550B - Codeforces 二进制 利 ...

  3. SpringBoot 入门及配置

    1.首先创建Maven文件,右键单击鼠标,others搜索Maven,点击Maven Project 2.点击下一步,打上勾下一步,输入包名和项目名称 3.第三步修改pom.xml导入Maven依赖M ...

  4. android软件简约记账app开发day09-主页面模块,收支记账信息的展示

    android软件简约记账app开发day09-主页面模块,收支记账信息的展示 我们第一天已经绘制了记账条目的界面,也在主界面设置了LietView来展示记账条目,今天来实现记账后再主界面的展示效果 ...

  5. Java开发中关于资源路径获取问题

    描述 在开发中经常会读取配置文件,在Web开发中大多数都是在项目路径下.核心的API类或者是Controller异或是jsp页面等,基本都是基于web应用的相对路径,很少去操作绝对路径,但是在客户端. ...

  6. react实战系列 —— 起步(mockjs、第一个模块、docusaurus)

    其他章节请看: react实战 系列 起步 本篇我们首先引入 mockjs ,然后进入 spug 系统,接着模仿"任务计划"模块实现一个类似的一级导航页面("My任务计划 ...

  7. arduino 天下第一(暴论) -- 智能猫眼与 SDDC 连接器移植到 arduino 上

    前言 之前看了官方玩过一个智能猫眼摄像头,我很有兴趣,但是那个 IDF 平台属实难整,我光安装都整了一天,网不好下载的包可能有问题.然后命令行操作也比较麻烦,我就想到了无敌的 arduino ,ESP ...

  8. Apache Doris Oracle ODBC外表使用指南

    1.软件环境 操作系统:ubuntu 18.04 Apache Doris :0.15 Postgresql数据库:oracle 19c UnixODBC:2.3.4 Oracle ODBC :ins ...

  9. Mybaitis入门基础(一)MyBatis的概念引入及工作原理

    阅读目录 一:对原生态JDBC问题的总结 二:MyBatis框架 三:mybatis入门程序 四:mybatis和Hibernate的本质区别与应用场景 五:小结 一:框架前言的那些事 良将难求 胜铁 ...

  10. springmvc-02(配置版与注解版区别)

    首先,我们来看配置版和注解版的相同步骤: 1.新建一个Moudle , springmvc-02-hello , 添加web的支持! 2.确定导入了SpringMVC 的依赖! 3.配置web.xml ...