通俗易懂理解MVC与MVVM架构模式（附代码示例）

最新推荐文章于 2026-05-24 11:47:12 发布

原创最新推荐文章于 2026-05-24 11:47:12 发布 · 1.2k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

计算机基础

笔记

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

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

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

五、实际应用场景

5.1 适合使用MVC的场景

传统的服务器端渲染应用
需要精细控制渲染过程的项目
团队成员对MVC模式更熟悉的情况

5.2 适合使用MVVM的场景

复杂的前端单页应用(SPA)
需要快速开发迭代的项目
数据驱动型的界面开发

六、现代框架中的实现

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;
  }
}