vue面试:MVVM、MVC、MVP的区别?

news2024/11/13 15:09:57

vue面试:MVVM、MVC、MVP的区别?

  • MVVM、MVC、MVP是什么?
    • (1)MVC
    • (2)MVVM
    • (3)MVP

MVVM、MVC、MVP是什么?

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
在开发单页面应用时,往往一个路由页面对应了一个脚本文件,所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取,对用户事件的响应所有的应用逻辑都混合在一起,这样在开发简单项目时,可能看不出什么问题,如果项目变得复杂,那么整个文件就会变得冗长、混乱,这样对项目开发和后期的项目维护是非常不利的。

(1)MVC

MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑,Model 负责存储页面的业务数据,以及对相应数据的操作。并且 View 和 Model 应用了观察者模式,当 Model 层发生改变的时候它会通知有关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带,它主要负责用户与应用的响应操作,当用户与页面产生交互的时候,Controller 中的事件触发器就开始工作了,通过调用 Model 层,来完成对 Model 的修改,然后 Model 层再去通知 View 层更新。
在这里插入图片描述

(2)MVVM

MVVM 分为 Model、View、ViewModel:

Model代表数据模型,数据和业务逻辑都在Model层中定义;
View代表UI视图,负责数据的展示;
ViewModel负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;

Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。
这种模式实现了 Model和View的数据自动同步,因此开发者只需要专注于数据的维护操作即可,而不需要自己操作DOM。
在这里插入图片描述

(3)MVP

MVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller。在 MVC 模式中使用观察者模式,来实现当 Model 层数据发生变化的时候,通知 View 层的更新。这样 View 层和 Model 层耦合在一起,当项目逻辑变得复杂的时候,可能会造成代码的混乱,并且可能会对代码的复用性造成一些问题。MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的Controller 只知道 Model 的接口,因此它没有办法控制 View 层的更新,MVP 模式中,View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起,以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦,Presenter 还包含了其他的响应逻辑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1481380.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

常用sql语句及其优化

文章目录 介绍常用sql语句1. 数据查询1.1 SELECT 语句1.2 DISTINCT 关键字1.3 WHERE 子句1.4 ORDER BY 子句1.5 LIMIT 关键字 2. 数据更新2.1 INSERT INTO 语句2.2 UPDATE 语句2.3 DELETE FROM 语句 3. 数据管理3.1 CREATE TABLE 语句3.2 ALTER TABLE 语句3.3 DROP TABLE 语句 …

gpt-3.5-turbo与星火认知大模型v3.5回答对比

创建kernel // Create a kernel with OpenAI chat completionKernel kernel Kernel.CreateBuilder().AddOpenAIChatCompletion(modelId:"使用的模型id" ,apiKey: "APIKey").Build();使用讯飞星火认知大模型的话,可以参考我这一篇文章&#xff…

qt5-入门-使用拖动方式创建Dialog

参考: C GUI Programming with Qt 4, Second Edition 本地环境: win10专业版,64位,Qt5.12 目录 实现效果基本流程逐步实操1)创建和初始化子部件2)把子部件放进布局中3)设置tab顺序4&#xff09…

十八:Java8新特性

文章目录 01、Java8概述02、Java8新特性的好处03、并行流与串行流04、Lambda表达式4.1、Lambda表达式使用举例4.2、Lambda表达式语法的使用14.3、Lambda表达式语法的使用2 05、函数式(Functional)接口5.1、函数式接口的介绍5.2、Java内置的函数式接口介绍及使用举例 06、方法引…

Nodejs基于vue的个性化服装衣服穿搭搭配系统sprinboot+django+php

本个性化服装搭配系统主要根据用户数据信息,推荐一些适合的搭配穿搭,同时,用户也可自己扫描上传自身衣物以及输入存放位置,搭配后存储到“我的搭配”中,以便下次挑选,既可以节省搭配时间,也方便…

vue3 构建项目

一.使用vite构建: npm init vitelatest 项目名称 构建的项目模板 进入项目 cd 项目名称 安装项目依赖包 npm install 启动项目 npm run dev 二.使用vue脚手架构建: npm init vuelatest 后续基本差不多

安全防御(第六次作业)

攻击可能只是一个点, 防御需要全方面进行 IAE引擎 DFI和DPI技术 --- 深度检测技术 DPI --- 深度包检测技术 --- 主要针对完整的数据包(数据包分片,分段需要重组) ,之后对 数据包的内容进行识别。(应用层&a…

mock工具whistle使用笔记

1、下载安装地址:关于whistle GitBook 安装完后,用本地的ip:设置的端口就可以反问,端口默认的8899,可以自定义 2、抓包https: (1)打开https (2)下载证书&…

从8.8到9.9,涨价的库迪还能守住牌局吗?

作者 | 辰纹 来源 | 洞见新研社 历经超半年的9.9元活动后,瑞幸不仅牢牢守稳盈利态势,还一举创造了新的神话——中国地区年收入首超星巴克。 根据瑞幸咖啡发布的截至12月31日的2023年第四季度及全年财报。第四季度,瑞幸咖啡净营收为70.6亿元…

Talk|上海交通大学晋嘉睿:序列建模技术在推荐系统中的应用

本期为TechBeat人工智能社区第574期线上Talk。 北京时间2月28日(周三)20:00,上海交通大学博士生—晋嘉睿的Talk已准时在TechBeat人工智能社区开播! 他与大家分享的主题是: “序列建模技术在推荐系统中的应用”,系统地介绍了他们在序列数据的建…

C++数据结构与算法——二叉搜索树的属性

C第二阶段——数据结构和算法,之前学过一点点数据结构,当时是基于Python来学习的,现在基于C查漏补缺,尤其是树的部分。这一部分计划一个月,主要利用代码随想录来学习,刷题使用力扣网站,不定时更…

【数据库管理系统】Mysql 8.0.36入门级安装

下载地址 官方网址:MySQL 注意事项 建议不要安装最新版本,一般找mysql5.0或mysql8.0系列版本即可;mysq1官网有.zip和.msi两种安装形式;zip是压缩包,直接解压缩以后使用的,需要自己配置各种东西&#xff…

用按位或、按位与取反实现权限的增减

一、介绍: 在Linux操作系统中: r -4:可读权限 w -2:可写权限 x -1:可执行权限 问题1:三个权限为1,2,4,分别对应:2^0,2^1,2^2,为什么要用8进制表示用户的文件权限? …

Java毕业设计 基于SpringBoot vue 社区团购系统

Java毕业设计 基于SpringBoot vue 社区团购系统 SpringBoot vue 社区团购系统 功能介绍 前端用户: 首页 图片轮播 商品信息 商品分类展示 搜索 商品详情 点我收藏 添加到购物车 立即购买 我要开团 去参团 评论 公告资讯 资讯详情 登录 注册 个人中心 更新信息 点我充值 我的订…

三、《任务列表案例》前端程序搭建和运行

本章概要 整合案例介绍和接口分析 案例功能预览接口分析 前端工程导入 前端环境搭建导入前端程序 启动测试 3.1 整合案例介绍和接口分析 3.1.1 案例功能预览 3.1.2 接口分析 学习计划分页查询 /* 需求说明查询全部数据页数据 请求urischedule/{pageSize}/{currentPage} 请…

、JMETER与它的组件们

os进程取样器 这个取样器可以让jmeter直接调用python写的测试数据 这样就可以调用python写的测试数据给到jmeter进行调用 注意:1建议python返回转json格式dumps一下;2py文件中需要把结果打印出来,可以不用函数直接编写 传到jmeter之后可以用…

【嵌入式学习】网络编程day0229

一、思维导图 二、练习 TCP通信 服务器 #include <myhead.h> #define SER_IP "192.168.126.42" #define SER_PORT 8888 int main(int argc, const char *argv[]) {int wfd-1;//创建套接字if((wfdsocket(AF_INET,SOCK_STREAM,0))-1){perror("error"…

Nginx多次代理后获取真实的用户IP访问地址

需求&#xff1a;记录用户操作记录&#xff0c;类似如下表格的这样 PS: 注意无论你的服务是Http访问还是Https 访问的都是可以的&#xff0c;我们服务之前是客户只给开放了一个端口&#xff0c;但是既要支持https又要支持http协议&#xff0c;nginx 是可以通过stream 模块配置双…

设计模式-结构模式-装饰模式

装饰模式&#xff08;Decorator Pattern&#xff09;&#xff1a;动态地给一个对象增加一些额外的职责&#xff0c;就增加对象功能来说&#xff0c;装饰模式比生成子类实现更为灵活。装饰模式是一种对象结构型模式。 //首先&#xff0c;定义一个组件接口&#xff1a; public in…

【Python笔记-设计模式】策略模式

一、说明 策略模式是一种行为设计模式&#xff0c;它定义了一系列算法&#xff0c;将每个算法封装起来&#xff0c;并使它们可以互相替换。 (一) 解决问题 在需要根据不同情况选择不同算法或策略&#xff0c;规避不断开发新需求后&#xff0c;代码变得非常臃肿难以维护管理。…