HL🌱数字花园

通俗易懂理解 MVC 与 MVVM 架构模式（附代码示例）_mvc mvvm-CSDN 博客

6分钟阅读

一、前言：为什么需要架构模式？

在软件开发中，随着项目复杂度增加，代码很容易变得混乱不堪。架构模式的出现就是为了解决这个问题，它像城市的规划图一样，让不同功能的代码各司其职。今天我们就来聊聊最常用的两种前端架构模式：MVC 和 MVVM。

二、MVC 架构模式

2.1 什么是 MVC？

MVC 是 Model-View-Controller 的缩写，它将应用程序分为三个核心部分：

  • Model（模型）：负责数据和业务逻辑

  • View（视图）：负责界面显示

  • Controller（控制器）：接收用户输入，协调 Model 和 View

2.2 代码示例

原生 JavaScript 实现
<!-- View -->
<div id="app">
  <h1 id="title"></h1>
  <button id="btn">更改标题</button>
</div>
 
<script> // Model
  class Model {
    constructor() {
      this.title = "初始标题"
    }
    
    setTitle(newTitle) {
      this.title = newTitle
    }
  }
 
  // Controller
  class Controller {
    constructor(model, view) {
      this.model = model
      this.view = view
      
      // 绑定事件
      document.getElementById('btn').addEventListener('click', () => {
        this.changeTitle()
      })
    }
    
    changeTitle() {
      const newTitle = prompt('输入新标题:')
      this.model.setTitle(newTitle)
      this.view.update(this.model.title)
    }
  }
 
  // View
  class View {
    update(title) {
      document.getElementById('title').textContent = title
    }
  }
 
  // 初始化
  const model = new Model()
  const view = new View()
  new Controller(model, view)
  view.update(model.title) // 初始化视图 </script>

三、MVVM 架构模式

3.1 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的缩写，它是 MVC 的进化版：

  • Model（模型）：同样负责数据和业务逻辑

  • View（视图）：负责界面显示

  • ViewModel（视图模型）：连接 View 和 Model 的桥梁，实现数据绑定

3.2 MVVM 的核心：数据绑定

MVVM 最大的特点是数据双向绑定：

  • 当 Model 改变时，View 自动更新

  • 当 View 中用户输入改变时，Model 自动更新

3.3 Vue.js 实现示例

<div id="app">
  <!-- View -->
  <h1>{{ title }}</h1>
  <input v-model="title">
  <button @click="changeTitle">更改标题</button>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script> // 创建Vue实例（ViewModel）
  new Vue({
    el: '#app',
    // Model
    data: {
      title: '初始标题'
    },
    // 方法
    methods: {
      changeTitle() {
        this.title = prompt('输入新标题:', this.title)
      }
    }
  }) </script>

四、MVC vs MVVM 对比

特性MVCMVVM
数据流向单向（Controller 控制）双向（自动绑定）
耦合度较低更低
代码量较多较少
适用场景传统 Web 应用现代前端框架
学习曲线平缓较陡

五、实际应用场景

5.1 适合使用 MVC 的场景

  1. 传统的服务器端渲染应用

  2. 需要精细控制渲染过程的项目

  3. 团队成员对 MVC 模式更熟悉的情况

5.2 适合使用 MVVM 的场景

  1. 复杂的前端单页应用 (SPA)

  2. 需要快速开发迭代的项目

  3. 数据驱动型的界面开发

六、现代框架中的实现

6.1 React 中的类 MVC 实现

虽然 React 自称是 “视图库”，但配合 Redux 可以形成类 MVC 架构：

import React, { Component } from 'react';
import { createStore } from 'redux';
 
// Model (Redux部分)
const initialState = { title: '初始标题' };
function reducer(state = initialState, action) {
  switch(action.type) {
    case 'CHANGE_TITLE':
      return { ...state, title: action.payload };
    default:
      return state;
  }
}
const store = createStore(reducer);
 
// View
class App extends Component {
  state = store.getState();
  
  componentDidMount() {
    store.subscribe(() => {
      this.setState(store.getState());
    });
  }
  
  changeTitle = () => {
    const newTitle = prompt('输入新标题:');
    // Controller逻辑
    store.dispatch({ type: 'CHANGE_TITLE', payload: newTitle });
  }
  
  render() {
    return (
      <div>
        <h1>{this.state.title}</h1>
        <button onClick={this.changeTitle}>更改标题</button>
      </div>
    );
  }
}

6.2 Angular 中的 MVVM 实现

Angular 是典型的 MVVM 框架：

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <input [(ngModel)]="title">
    <button (click)="changeTitle()">更改标题</button>
  `
})
export class AppComponent {
  // Model
  title = '初始标题';
  
  // ViewModel方法
  changeTitle() {
    this.title = prompt('输入新标题:', this.title) || this.title;
  }
}

七、如何选择？

根据项目需求选择：

  • 选择 MVC：

    • 需要更多控制权

    • 项目结构相对简单

    • 团队熟悉传统模式

  • 选择 MVVM：

    • 追求开发效率

    • 复杂的数据驱动界面

    • 使用现代前端框架

八、总结

  1. MVC 通过 Controller 明确控制数据流向，适合传统 Web 开发

  2. MVVM 通过数据绑定简化开发，适合现代前端框架

  3. 理解两者差异有助于选择合适的技术栈

  4. 实际开发中，框架往往混合了多种模式

无论选择哪种架构，清晰的代码组织和职责分离才是最终目的。希望本文能帮助你理解这两种重要的架构模式！

开启新对话

关系图谱