Vue 中的 MVVM、MVC 和 MVP 模式深度解析

news2025/3/17 3:51:29

文章目录

    • 1. 模式概览与核心概念
      • 1.1 模式定义
      • 1.2 架构对比图
    • 2. MVC 模式详解
      • 2.1 MVC 流程图
      • 2.2 Vue 中的 MVC 实现
    • 3. MVP 模式详解
      • 3.1 MVP 流程图
      • 3.2 Vue 中的 MVP 实现
    • 4. MVVM 模式详解
      • 4.1 MVVM 流程图
      • 4.2 Vue 中的 MVVM 实现
    • 5. 模式对比分析
      • 5.1 职责对比
      • 5.2 通信方式对比
    • 6. 优缺点分析
      • 6.1 MVC
      • 6.2 MVP
      • 6.3 MVVM
    • 7. 适用场景分析
      • 7.1 MVC 适用场景
      • 7.2 MVP 适用场景
      • 7.3 MVVM 适用场景
    • 8. 最佳实践建议
      • 8.1 选择策略
      • 8.2 代码组织
    • 9. 扩展阅读

1. 模式概览与核心概念

1.1 模式定义

模式全称核心思想
MVCModel-View-Controller分离关注点,职责分离
MVPModel-View-Presenter视图与模型解耦
MVVMModel-View-ViewModel数据绑定,响应式编程

1.2 架构对比图

MVC
Controller
View
Model
MVP
Presenter
View
Model
MVVM
ViewModel
View
Model

2. MVC 模式详解

2.1 MVC 流程图

User View Controller Model 用户交互 传递事件 更新数据 返回结果 更新视图 显示结果 User View Controller Model

2.2 Vue 中的 MVC 实现

// Model
const model = {
  data: {
    message: 'Hello MVC'
  },
  updateMessage(newMessage) {
    this.data.message = newMessage
  }
}

// View
const template = `
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change</button>
  </div>
`

// Controller
const controller = {
  init() {
    this.view = new Vue({
      el: '#app',
      data: model.data,
      methods: {
        changeMessage() {
          model.updateMessage('New Message')
        }
      }
    })
  }
}

controller.init()

3. MVP 模式详解

3.1 MVP 流程图

User View Presenter Model 用户交互 传递事件 更新数据 返回结果 更新视图 显示结果 User View Presenter Model

3.2 Vue 中的 MVP 实现

// Model
const model = {
  data: {
    message: 'Hello MVP'
  },
  updateMessage(newMessage) {
    this.data.message = newMessage
  }
}

// View
const template = `
  <div>
    <p>{{ message }}</p>
    <button @click="presenter.changeMessage">Change</button>
  </div>
`

// Presenter
const presenter = {
  init() {
    this.view = new Vue({
      el: '#app',
      data: model.data,
      methods: {
        changeMessage: () => {
          model.updateMessage('New Message')
          this.view.message = model.data.message
        }
      }
    })
  }
}

presenter.init()

4. MVVM 模式详解

4.1 MVVM 流程图

User View ViewModel Model 用户交互 触发命令 更新数据 返回结果 自动更新 显示结果 User View ViewModel Model

4.2 Vue 中的 MVVM 实现

// Model
const model = {
  data: {
    message: 'Hello MVVM'
  },
  updateMessage(newMessage) {
    this.data.message = newMessage
  }
}

// ViewModel
const viewModel = new Vue({
  el: '#app',
  data: model.data,
  methods: {
    changeMessage() {
      model.updateMessage('New Message')
    }
  }
})

// View
const template = `
  <div id="app">
    <p>{{ message }}</p>
    <button @click="changeMessage">Change</button>
  </div>
`

5. 模式对比分析

5.1 职责对比

模式View 职责Controller/Presenter/ViewModel 职责Model 职责
MVC显示数据,接收用户输入处理业务逻辑,更新模型管理数据
MVP显示数据,接收用户输入处理业务逻辑,更新视图管理数据
MVVM显示数据,绑定命令数据绑定,业务逻辑管理数据

5.2 通信方式对比

模式View 与 Controller/Presenter/ViewModelController/Presenter/ViewModel 与 Model
MVC直接调用直接调用
MVP通过接口直接调用
MVVM数据绑定直接调用

6. 优缺点分析

6.1 MVC

优点缺点
职责清晰View 与 Model 耦合
易于理解Controller 容易臃肿
广泛支持测试难度较大

6.2 MVP

优点缺点
视图与模型解耦Presenter 复杂
易于测试接口数量多
职责分离代码量增加

6.3 MVVM

优点缺点
数据绑定调试难度大
代码简洁学习曲线陡峭
易于维护性能开销

7. 适用场景分析

7.1 MVC 适用场景

  1. 传统 Web 应用:需要快速开发
  2. 小型项目:结构简单
  3. 已有 MVC 框架:如 Ruby on Rails

7.2 MVP 适用场景

  1. 复杂 UI 逻辑:需要解耦
  2. 测试驱动开发:易于单元测试
  3. Android 开发:常用模式

7.3 MVVM 适用场景

  1. 数据驱动应用:如 Vue、React
  2. 复杂前端应用:需要数据绑定
  3. 现代 Web 开发:追求开发效率

8. 最佳实践建议

8.1 选择策略

  1. 选择 MVC

    • 传统 Web 应用
    • 小型项目
    • 快速原型开发
  2. 选择 MVP

    • 复杂 UI 逻辑
    • 需要高测试覆盖率
    • Android 开发
  3. 选择 MVVM

    • 数据驱动应用
    • 复杂前端应用
    • 现代 Web 开发

8.2 代码组织

# MVC 结构
src/
├── controllers/
├── models/
└── views/

# MVP 结构
src/
├── presenters/
├── models/
└── views/

# MVVM 结构
src/
├── viewmodels/
├── models/
└── views/

9. 扩展阅读

  • Vue 官方文档
  • MVC 模式详解
  • MVP 模式详解
  • MVVM 模式详解

通过本文的深度解析,开发者可以全面理解 MVC、MVP 和 MVVM 模式的特点与适用场景。建议根据项目需求选择合适的架构模式,持续学习和实践以提升技术能力。

在这里插入图片描述

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

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

相关文章

基于DeepSeek×MWORKS 2025a的ROM Builder自动化降阶实战

一、引言 当前&#xff0c;工业仿真领域正经历着前所未有的「智能焦虑」——当自动驾驶算法已能理解城市路网&#xff0c;当大模型开始设计蛋白质结构&#xff0c;这个驱动大国重器研发的核心领域&#xff0c;却仍在与千万级方程组成的庞杂模型艰难博弈。传统仿真降阶如同在数…

入门基础项目-前端Vue_02

文章目录 1. 用户信息1.1 整体设计1.2 完整代码 User.vue1.2.1 数据加载1.2.2 表格 el-table1.2.2.1 多选1.2.2.2 自定义列的内容 Slot1.2.2.3 图片 el-image1.2.2.4 分页 el-pagination 1.2.3 编辑1.2.3.1 弹出框 el-dialog1.2.3.2 上传 el-upload 1.2.4 新增1.2.5 删除1.2.6 …

Qt6.8.2中JavaScript调用WebAssembly的js文件<1>

前段时间已经学习了如何在QtAssembly中编译FFmpeg资源了&#xff0c;接下来需要使用Html来调用QtCreator中WebAssembly套件写的功能&#xff0c;逐步实现javascrpt与c复杂功能的视线。 接下来我先为大家介绍一个非常简单的加法调用吧&#xff01; 功能讲解 开发环境&#xf…

【mysql】centOS7安装mysql详细操作步骤!—通过tar包方式

【mysql】centOS7安装mysql详细操作步骤&#xff01; linux系统安装mysql版本 需要 root 权限&#xff0c;使用 root 用户进行命令操作。使用tar文件包&#xff0c;安装&#xff0c;gz包也可以但是还需要配置用户&#xff0c;tar包虽然大&#xff0c;但是全啊&#xff01; 1. …

Linux 下 MySQL 8 搭建教程

一、下载 你可以从 MySQL 官方下载地址 下载所需的 MySQL 安装包。 二、环境准备 1. 查看 MySQL 是否存在 使用以下命令查看系统中是否已经安装了 MySQL&#xff1a; rpm -qa|grep -i mysql2. 清空 /etc/ 目录下的 my.cnf 执行以下命令删除 my.cnf 文件&#xff1a; [roo…

单口路由器多拨号ADSL实现方法

条件是多拨号场景&#xff0c;公司路由器接口不够用

最新版VMware 17.6.3安装包分享

修复 Windows 11 主机无响应问题&#xff1a;Windows 11 主机锁定或解锁后&#xff0c;虚拟机可能变得无响应&#xff0c;此问题已在 17.6.3 版本中解决。 解决虚拟机启动崩溃问题&#xff1a;在某些系统上启动虚拟机后&#xff0c;Workstation Pro 可能会崩溃&#xff0c;新版…

Java高频面试之集合-12

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天来报道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面试官&#xff1a;HashMap 的 hash 函数是怎么设计的? HashMap的hash函数设计核心在于减少碰撞、提高数据分布均匀性&#xff0c;具体实现…

视频推拉流EasyDSS案例分析:互联网直播/点播技术与平台创新应用

随着互联网技术的快速发展&#xff0c;直播/点播平台已成为信息传播和娱乐的重要载体。特别是在电视购物领域&#xff0c;互联网直播/点播平台与技术的应用&#xff0c;不仅为用户带来了全新的购物体验&#xff0c;也为商家提供了更广阔的营销渠道。传统媒体再一次切实感受到了…

【黑马点评|项目】万字总结(下)

文章上半部分&#xff1a; 【黑马点评|项目】万字总结&#xff08;上&#xff09; 优惠卷秒杀 当用户抢购时&#xff0c;就会生成订单并保存到tb_voucher_order这张表中&#xff0c;而订单表如果使用数据库自增ID就存在一些问题&#xff1a; id的规律性太明显&#xff0c;容易出…

[数据结构]排序之 直接选择排序

1 基本思想&#xff1a; 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的 数据元素排完 。 2 直接选择排序 : 在元素集合 array[i]--array[n-1] 中选择关键码最大 ( 小 ) 的数据元素…

前端工程化之前端工程化详解 包管理工具

前端工程化详解 & 包管理工具 前端工程化什么是前端工程化前端工程化发展脚手架能力 体验度量规范流程效能流程扭转 稳定性建设针对整体稳定性建设 可监控&#xff1a;前端监控系统 包管理工具npm包详解package.jsonname 模块名description 模块描述信息keywords&#xff1…

Linux 蓝牙音频软件栈实现分析

Linux 蓝牙音频软件栈实现分析 蓝牙协议栈简介蓝牙控制器探测BlueZ 插件系统及音频插件蓝牙协议栈简介 蓝牙协议栈是实现蓝牙通信功能的软件架构,它由多个层次组成,每一层负责特定的功能。蓝牙协议栈的设计遵循蓝牙标准 (由蓝牙技术联盟,Bluetooth SIG 定义),支持多种蓝牙…

PySide(PyQt),使用types.MethodType动态定义事件

以PySide(PyQt)的图片项为例&#xff0c;比如一个视窗的场景底图是一个QGraphicsPixmapItem&#xff0c;需要修改它的鼠标滚轮事件&#xff0c;以实现鼠标滚轮缩放显示的功能。为了达到这个目的&#xff0c;可以重新定义一个QGraphicsPixmapItem类&#xff0c;并重写它的wheelE…

SpringData JPA事务管理:@Transactional注解与事务传播

文章目录 引言一、事务基础概念二、Transactional注解详解2.1 基本用法2.2 属性配置2.3 类级别与方法级别 三、事务传播行为详解3.1 REQUIRED&#xff08;默认&#xff09;3.2 REQUIRES_NEW3.3 其他传播行为 四、事务隔离级别五、事务最佳实践5.1 正确设置事务边界5.2 合理使用…

第2章、WPF窗体及其属性

1、窗体的宽与高。 2、启动窗体设置 3、窗体的启动位置设置 4、窗体图标更换 5、应用程序的图标更改 6、 7、窗体属性汇总&#xff1a; AllowsTransparency 类型: bool 描述: 该属性决定窗口是否可以有透明效果。如果设置为true&#xff0c;窗口的背景必须设置为Transpar…

关于ModbusTCP/RTU协议对接Ethernet/IP(CIP)协议的方案

IGT-DSER智能网关模块支持西门子、倍福(BECKHOFF)、罗克韦尔AB&#xff0c;以及三菱、欧姆龙等各种品牌的PLC之间通讯&#xff0c;支持Ethernet/IP(CIP)、Profinet(S7)&#xff0c;以及FINS、MC等工业自动化常用协议&#xff0c;同时也支持PLC与Modbus协议的工业机器人、智能仪…

WPF 与 GMap.NET 结合实现雷达目标动态显示与地图绘制

概述 雷达上位机是雷达系统中用于数据可视化、分析和控制的核心软件。本文将介绍如何使用 C# 和 WPF 框架开发一个雷达上位机程序&#xff0c;主要功能包括&#xff1a; 显示目标轨迹&#xff1a;在界面上实时绘制雷达探测到的目标轨迹。点击显示详细信息&#xff1a;用户点击…

A SURVEY ON POST-TRAINING OF LARGE LANGUAGE MODELS——大型语言模型的训练后优化综述——第2部分

3、微调&#xff08;上一部分内容&#xff09; 4、LLMs的对齐 大型语言模型&#xff08;LLMs&#xff09;中的对齐涉及引导模型输出以符合人类预期和偏好&#xff0c;特别是在安全关键或用户面对的应用程序中。本章讨论了实现对齐的三个主要范式&#xff1a; 带有反馈的人工…

某大厂自动化工程师面试题

一些大厂的自动化工程师面试题汇总: 基础知识类 请解释什么是PLC(可编程逻辑控制器)?什么是PID控制?它在自动化系统中的作用是什么?请描述一下工业4.0的基本概念。编程与控制系统类 你熟悉哪些PLC编程语言?请举例说明。如何在SCADA系统中实现数据采集和监控?请解释一下…