当前位置: 首页 > news >正文

什么是 MVVM ?

课堂笔记

什么是 MVVM ?

MVVM 是一种架构模式,它最初是由微软的两位工程师在 2005 年的时候所提出的。

  • Model:Model代表的是你的数据
  • View:视图,直接和用户打交道的
  • ViewModel:ViewModel 是 View 和 Model 之间的桥梁。View 和 ViewModel 之间会进行一个数据的绑定。当用户在 View 中进行操作的时候,ViewModel 会去更新 Model 的状态。同理,当 Model 数据发生改变的时候,ViewModel 也会通知 View,让 View 自动显示最新的内容。

MVVM 最早期并非是用于前端的,但是随着前端的火热,慢慢也引入了这种架构模式。

需要说一下,Vue、React 这些现代框架并非第一批使用 MVVM 架构模式的框架,在此之前还有 knockout.js 以及 ember.js。

这里要强调一下,Vue 是 MVVM 架构模式。但是 React 并非 MVVM 架构模式。

在 Vue 中,有明确的哪个部分是 M,哪个部分是 V,哪个部分是 VM。

在 React 里面,没有明确的 VM 部分,采用的是 Flux 的架构模式,是单向数据流。

作为现代前端框架,有如下 4 个共有的特点:

  • 状态管理
  • 支持组件化开发
  • 有配套的前端路由库
  • 有配套的状态管理库

接下来我们来重点对比一下 Vue 和 React 这两个框架的异同。

  1. 视图描述

Vue 使用的是模板进行描述
React 使用的是 JSX 进行描述

不同的描述方式体现了两个团队不同的设计哲学。

React团队认为,UI(HTML)本质上和逻辑(JS)存在耦合部分。作为前端开发工程师,JS 是用得最多的,因此它们考虑屏蔽 HTML,全部使用 JS 来描述 UI,这样子就可以让 UI 和 逻辑配合更紧密。因此他们设计出了 JSX
出发的角度是从前端出发的。

而模板刚好相反,是从后端的角度出发的。本质上是扩展了 HTML,在 HTML 中加入了相关逻辑的语法。

总结一下:

  • JSX 的出发点:既然前端使用 JS描述逻辑,就扩展 JS 语法,让它能够描述 UI。
  • 前端模板的出发点,前端框架使用 HTML 来描述 UI,那就扩展 HTML 语法,让它能够书写一定的逻辑
  1. 虚拟 DOM

关于虚拟 DOM,React 团队官方的定时是描述真实 DOM 的一种方式。虚拟 DOM 是一种理念,实现的方式可以是多种多样的,只要你能够通过一种方式来描述真实 DOM,那么就是虚拟 DOM 的一种实现方案。

一说到虚拟 DOM,有人就会误认为虚拟 DOM 一定比原生操作 DOM 快,这种认识也是错的。

假设我就是单纯的创建一个 DOM:

let newP = document.createElement("p");
document.body.appendChild(newP);

这里的话,原生 DOM 的方式一定是比虚拟 DOM 更快的。因为即便是虚拟 DOM,最终也是要去操作真实的 DOM。

根据 React 团队的研究,大家平时在操作 DOM 的时候,比起使用原生的 API 去操作 DOM,更喜欢使用 innerHTML

document.body.innerHTML = `<p>asdasdasd</p>
`

那么此时,使用 innerHTML 就涉及到两个层面的计算

  • JS 层面:解析字符串
  • DOM 层面:创建对应的 DOM 节点
innerHTML虚拟DOM
JS层面解析字符串创建JS对象
DOM层面创建对应的DOM节点创建对应的DOM节点

因此可以看出,在第一次创建 DOM 节点的时候,虚拟 DOM 和传统的 innerHTML 的方式,至少都有两个层面的计算。

虚拟 DOM 真正发挥威力的时候,是在更新的时候。innerHTML 需要重新赋值,重新赋值意味着之前创建的 DOM 节点全部销毁。但是虚拟 DOM 会通过 diff 算法只更新必要的 DOM 节点

innerHTML虚拟DOM
JS层面解析字符串创建JS对象
DOM层面销毁原来所有的DOM修改必要的DOM节点
DOM层面创建对应的DOM节点

虚拟 DOM 还有一个好处?
多平台渲染的抽象能力。虚拟 DOM 可以对接不同的宿主环境,实现一个框架,多端渲染。

  1. React 为什么要从以前的 Stack 架构改为 Fiber 架构 ?

  2. Vue 是否需要 Fiber 架构 ?

要想把这两个问题搞清楚,首先需要搞清楚 Vue 和 React 设计上面的区别。

React 是否是响应式?Vue 是否是响应式 ?

React 不是响应式设计,而 Vue 是响应式设计,这意味 React 中当状态发生改变后,React 不知道是哪个改变了,需要通过 diff 算法计算后才知道。而 Vue 是响应式的,意味着一旦有数据发生变化,Vue 是知道的。

正因为这两种选择的不同,导致了两种框架在后面的发展中产生了巨大的区别。

React 这种设计,每次需要计算整颗虚拟 DOM,这个是属于 JS 层面的计算,虽然速度很快,但是一旦你的虚拟 DOM 数的体量很大,还是会消耗很长的时间。这意味浏览器本来要绘制下一帧了,但是你还在执行 JS,又不能打断。

从 React16 开始,官方引入了 Fiber 的概念,使用链表的方式来描述 UI,之所以采用链表,是因为中途能够打断。

官方两种架构的对比示例:https://claudiopro.github.io/react-fiber-vs-stack-demo/

Vue 不需要 Fiber 架构。因为 Vue 不存在像 React 一样要计算整颗虚拟 DOM 树这种要消耗大量时间的计算。Vue 是响应式的,Vue 本身也遇到了自身的瓶颈,那就是 watcher 太多了。

Vue 的解决方案就是引入虚拟 DOM,将虚拟 DOM 和响应式结合了起来,也就是改变了响应式的粒度。

相关文章:

什么是 MVVM ?

课堂笔记 什么是 MVVM &#xff1f; MVVM 是一种架构模式&#xff0c;它最初是由微软的两位工程师在 2005 年的时候所提出的。 Model&#xff1a;Model代表的是你的数据View&#xff1a;视图&#xff0c;直接和用户打交道的ViewModel&#xff1a;ViewModel 是 View 和 Model…...

Redis(一)

1、redis Redis是一个完全开源免费的高性能&#xff08;NOSQL&#xff09;的key-value数据库。它遵守BSD协议&#xff0c;使用ANSI C语言编写&#xff0c;并支持网络和持久化。Redis拥有极高的性能&#xff0c;每秒可以进行11万次的读取操作和8.1万次的写入操作。它支持丰富的数…...

自动驾驶预测-决策-规划-控制学习(1):自动驾驶框架、硬件、软件概述

文章目录 前言&#xff1a;无人驾驶分级一、不同level的无人驾驶实例分析1.L2级别2.L3级别3.L4级别①如何在减少成本的情况下&#xff0c;实现类似全方位高精度的感知呢&#xff1f;②路侧终归是辅助&#xff0c;主车的智能才是重中之重&#xff1a;融合深度学习 二、无人驾驶的…...

SSM建材商城网站----计算机毕业设计

项目介绍 本项目分为前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,管理员管理,注册用户管理,新闻公告管理,建材类型管理,配货点管理,建材商品管理,建材订单管理,建材评价管理等功能。 用…...

js逆向第9例:猿人学第2题-js混淆-动态cookie1

题目2:提取全部5页发布日热度的值,计算所有值的加和,并提交答案 (感谢蔡老板为本题提供混淆方案) 既然题目已经给出了cookie问题,那就从cookie入手,控制台找到数据请求地址 可以看到如下加密字符串m类似md5,后面跟着时间戳 m=45cc41dcdb15159ebb50564635f8e362|1704301…...

[论文分享]TimesURL:通用时间序列表示学习的自监督对比学习

论文题目&#xff1a;TimesURL: Self-supervised Contrastive Learning for Universal Time Series Representation Learning 论文地址&#xff1a;https://arxiv.org/abs/2312.15709 代码地址&#xff1a;暂无 摘要 学习适用于各种下游任务的通用时间序列表示具有挑战性&…...

解决sublime中文符号乱码问题

效果图 原来 后来 问题不是出自encode文件编码&#xff0c;而是win10的字体问题。 解决方法 配置&#xff1a; { "font_face":"Microsoft Yahei", "dpi_scale": 1.0 } 参考自 Sublime 输入中文显示方框问号乱码_sublime中文问号-CSDN博…...

厚积薄发11年,鸿蒙究竟有多可怕

​12月20日中国工程院等权威单位发布《2023年全球十大工程成就》。本次发布的2023全球十大工程成就包括“鸿蒙操作系统”在内。入围的“全球十大工程成就”&#xff0c;主要指过去五年由世界各国工程科技工作者合作或单独完成且实践验证有效的&#xff0c;并且已经产生全球影响…...

pyDAL一个python的ORM(4) pyDAL查询操作

1 、简单查询 rows db(db.person.dept marketing).select(db.person.id, db.person.name, db.person.dept) rows db(db.person.dept marketing).select() rows db(db.person.dept marketing).select(db.person.ALL) rows db().select(db.person.ALL) / db(db.person).se…...

如何通过Python将各种数据写入到Excel工作表

在数据处理和报告生成等工作中&#xff0c;Excel表格是一种常见且广泛使用的工具。然而&#xff0c;手动将大量数据输入到Excel表格中既费时又容易出错。为了提高效率并减少错误&#xff0c;使用Python编程语言来自动化数据写入Excel表格是一个明智的选择。Python作为一种简单易…...

跟着cherno手搓游戏引擎【2】:日志系统spdlog和premake的使用

配置&#xff1a; 日志库文件github&#xff1a; GitHub - gabime/spdlog: Fast C logging library. 新建vendor文件夹 将下载好的spdlog放入 配置YOTOEngine的附加包含目录&#xff1a; 配置Sandbox的附加包含目录&#xff1a; 包装spdlog&#xff1a; 在YOTO文件夹下创建…...

Ubuntu20.04 上启用 VCAN 用作本地调试

目录 一、启用本机的 VCAN​ 编辑 1.1 加载本机的 vcan 1.2 添加本机的 vcan0 1.3 查看添加的 vcan0 1.4 开启本机的 vcan0 1.5 关闭本机的 vcan0 1.6 删除本机的 vcan0 二、测试本机的 VCAN 2.1 CAN 发送数据 代码 2.2 CAN 接收数据 代码 2.3 CMakeLists.…...

LeetCode(31) 下一个排列

整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大的排列。更正式地&#xf…...

Git LFS: 简单高效的大文件版本控制

Git Large File Storage 问题 在使用git上传大文件时候&#xff0c;git push时候会报错: remote: error: File xxx.tar.gz is 135.17 MB; this exceeds GitHubs file size limit of 100 MB可以看到&#xff0c;git限制上传大小是100MB&#xff0c;超过的话就会报错&#xff…...

如何培养用户思维

产品开发是根据用户要求建造出系统的过程&#xff0c;产品开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程&#xff0c;一般通过某种程序设计语言来实现。然而用户思维能够帮助企业更好地理解市场需求&#xff0c;进行产品的开发和完善&#xff0c;用户是企业产…...

由浅入深理解C#中的事件

目录 本文较长&#xff0c;给大家提供了目录&#xff0c;可以直接看自己感兴趣的部分。 前言有关事件的概念示例​ 简单示例​ 标准 .NET 事件模式​ 使用泛型版本的标准 .NET 事件模式​ 补充总结 参考前言 前面介绍了C#中的委托&#xff0c;事件的很多部分都与委托…...

Nginx(十六) 配置文件详解 - server stream服务流

本篇文章主要讲 ngx_stream_core_module 模块下各指令的使用方法&#xff0c;Nginx默认未配置该模块&#xff0c;需要用“--with-stream”配置参数重新编译Nginx。 worker_processes auto;error_log /var/log/nginx/error.log info;events {worker_connections 1024; }stream…...

Css中默认与继承

initial默认样式&#xff1a; initial 用于设置 Css 属性为默认值 h1 {color: initial; }如display或position不能被设置为initial&#xff0c;因为有默认属性。例如&#xff1a;display:inline inherit继承样式&#xff1a; inherit 用于设置 Css 属性应从父元素继承 di…...

gitee上的vue大屏项目

在 Gitee 上,有几个值得注意的 Vue 大屏项目:vue-big-screen-plugin (Gitee): 这是一个基于 Vue3、Typescript、DataV 和 ECharts5 框架的可视化大屏项目。它使用 .vue 和 .tsx 文件构建界面,并采用新版动态屏幕适配方案。这个项目支持数据的动态刷新渲染,内部的 DataV 和 …...

【LeetCode:114. 二叉树展开为链表 | 二叉树 + 递归】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…...

社保养老金发放计算方法

退休后养老金计算公式很复杂&#xff0c;自己自行百度查一下&#xff0c;这里说一下男性&#xff0c;女工人&#xff0c;女干部之间计算差别。 退休后&#xff0c;能到手的养老金多少&#xff0c;取决于你的个人账户里的钱&#xff0c;个人账户里的钱越多&#xff0c;到手养老…...

概率论基础复习题

一、填空题 二、选择题 答案&#xff1a;B 答案&#xff1a;C 答案&#xff1a;C 答案&#xff1a;D。统计量不含任何未知参数。 答案&#xff1a;A 答案&#xff1a;C 样本均值是总体均值的无偏估计&#xff1b;样本方差是总体方差的无偏估计。 答案&#xff1a;B。统计值是一…...

c++,mutex,unique_lock,recursive_mutex,shared_mutex对比分析

当处理多线程并发时&#xff0c;正确使用锁是确保线程安全的关键。 1. std::mutex&#xff08;互斥锁&#xff09;&#xff1a; std::mutex 是C标准库提供的最基本的锁。它的基本使用如下&#xff1a; #include <iostream> #include <mutex> #include <threa…...

MySQL与Oracle数据库在网络安全等级方面用到的命令

MySQL数据库命令集 查看数据库版本 SELECT VERSION(); 空口令查询 SELECT user,host,account_locked FROM mysql.user WHERE user ; SELECT * FROM mysql.user; 查询 用户的密码加密情况 SELECT HOST,USER,PLUGIN FROM mysql.user; 查询是否有空用户 SELECT host,user,plug…...

MySQL——视图

目录 一.视图介绍 二.基本使用 三.视图规则和限制 一.视图介绍 视图是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。视图的数据变化会影响到基表&#xff0c;基表的数据变化也会影响到视图。 二.基本使用 创…...

【响应式编程-03】Lambda表达式底层实现原理

一、简要描述 Lambda的底层实现原理Lambda表达式编译和运行过程 二、Lambda的底层实现原理 Lambda表达式的本质 函数式接口的匿名子类的匿名对象 反编译&#xff1a;cfr-0.145.jar 反编译&#xff1a;LambdaMetafactory.metafactory() 跟踪调试&#xff0c;转储Lambda类&#x…...

深入理解可变参数

1.C语言方式 目录 1.C语言方式 1.1.宏介绍 1.2.原理详解 1.3.宏的可变参数 1.4.案例分析 1.5.其他实例 2.C之std::initializer_list 2.1.简介 2.2.原理详解 2.3.案例分析 3.C之可变参数模版 3.1.简介 3.2.可变参数个数 3.3.递归包展开 3.4.逗号表达式展开 3.5…...

Centos7.9和Debian12部署Minio详细流程

一、安装minio Centos wget https://dl.min.io/server/minio/release/linux-amd64/archive/minio-20230227181045.0.0.x86_64.rpm -O minio.rpm sudo dnf install minio.rpmDebian wget https://dl.min.io/server/minio/release/linux-amd64/archive/minio_20230227181045.0…...

软件测试|教你如何使用UPDATE修改数据

简介 在SQL&#xff08;Structured Query Language&#xff09;中&#xff0c;UPDATE语句用于修改数据库表中的数据。通过UPDATE语句&#xff0c;我们可以更新表中的特定记录或多条记录&#xff0c;从而实现数据的修改和更新。本文将详细介绍SQL UPDATE语句的语法、用法以及一…...

新闻稿发布:媒体重要还是价格重要

在当今信息爆炸的数字时代&#xff0c;企业推广与品牌塑造不可或缺的一环就是新闻稿发布。新闻稿是一种通过媒体渠道传递企业信息、宣传品牌、事件或产品新闻的文本形式。发布新闻稿的过程旨在将企业的声音传递给更广泛的受众&#xff0c;借助媒体平台实现品牌故事的广泛传播。…...

有道云笔记 wordpress/自己做网站

亲爱的《烈焰手游》玩家&#xff1a;您们好!感谢大家从《烈焰》手游的支持与厚爱!为了给大家提供更加优质的游戏环境&#xff0c;感受更多的游戏乐趣&#xff0c;提高游戏的可玩性和互动性&#xff0c;应广大玩家的需求&#xff0c;我们将对部分服进行合服操作&#xff0c;以下…...

网站推广方式都有哪些/谷歌浏览器中文手机版

&#xff08;一&#xff09;Solr 简介 采用java开发&#xff0c;基于Lucene的全文搜索服务器&#xff0c;同时对其进行了扩展&#xff0c;提供了比Lucene更加丰富的查询语言&#xff0c;同时实现了可配置&#xff0c;可扩展&#xff0c;并对查询性能进行了优化&#xff0c;并且…...

如何做好外贸网站建设/百度小说排行榜完本

Spring Aware是什么 Spring提供Aware接口能让Bean感知Spring容器的存在&#xff0c;即让Bean可以使用Spring容器所提供的资源。 Spring Aware的分类 几种常用的Aware接口如下。 Aware接口说明ApplicationContextAware能获取Application Context调用容器的服务ApplicationEv…...

网站开发实习生/自动点击器软件

root为#&#xff0c;普通用户用$常用指令ls   显示文件或目录-l 列出文件详细信息l(list)---ls -l-a 列出当前目录下所有文件及目录&#xff0c;包括隐藏的a(all)mkdir 创建目录-p 创建目录&#xff0c;若无父目录&#xff0c…...

轮网站开发的重要性/资源优化网站排名

计算机能力挑战赛总结一、赛题1. 设计目标2. 基本要求3. 扩展要求4. 发挥要求二、分析1. 基本要求-车载娱乐播放2. 基本要求-车载仪表显示3. 扩展要求-音频录制4. 扩展要求-歌曲列表5. 扩展要求-汽车黑匣子6. 发挥要求-移动互联功能7. 发挥要求-智能语音控制三、制作四、结果五…...

湛江住房和城乡建设局网站/百家号seo

注&#xff1a;C#语言发展十分迅速&#xff0c;而且仍然有很大的提升空间&#xff0c;所以现在写下的有关C#语言上的一些限制&#xff0c;可能过一两年就不同了&#xff0c;所以需要不断更新。至于C&#xff0c;因为已经很久没怎么变动&#xff0c;所以就容易得多。 (*) 允许初…...