Frontend Notes Lab

Appearance

MVVM 模式与 Vue / React 对比 ​

理解路径 ​

MVC / MVVM 都是组织 UI 代码的设计模式，核心差异在「视图和数据怎么同步」：MVC 靠 Controller 协调、偏单向；MVVM 多了 ViewModel，通过数据绑定让视图和数据双向自动同步。Vue 与 React 都是组件化、虚拟 DOM、数据驱动视图的框架，差异在「如何追踪变化」「模板还是 JSX」「生态规模」等。

什么是 MVVM，与 MVC 有什么区别 ​

先搞清楚：在 Vue 里，三个字母分别对应什么？ ​

很多人看了定义还是迷糊，因为没有对应到具体代码。在 Vue 组件里：

角色在 Vue 里对应什么具体是什么
Modeldata / Pinia store应用的数据，纯 JS 对象，不涉及任何 DOM
View<template>用户看到的 HTML 页面
ViewModelVue 实例（组件本身）响应式系统 + methods + computed + watch，它把 Model 和 View 粘在一起
html
<!-- View：<template> 里的 HTML -->
<template>
  <p>{{ message }}</p>
  <button @click="reverse">反转</button>
</template>

<script>
export default {
  // Model：纯数据
  data() {
    return { message: 'Hello' }
  },
  // ViewModel：处理逻辑，不直接操作 DOM
  methods: {
    reverse() {
      this.message = this.message.split('').reverse().join('')
      // 只改数据，Vue 自动更新 <p> 的内容
    }
  }
}
</script>

关键点：在 MVVM 里，你永远不需要写 document.querySelector('p').textContent = ... 这样的代码。你只操作 Model（数据），ViewModel（Vue）自动帮你同步 View（DOM）。

MVC 是怎么做的？（对比） ​

MVC 没有自动绑定机制，Controller 必须手动更新 DOM：

js
// MVC 风格（类似 jQuery 时代）
const model = { message: 'Hello' }

// Controller：手动操作 DOM
document.querySelector('button').addEventListener('click', () => {
  model.message = model.message.split('').reverse().join('')
  document.querySelector('p').textContent = model.message  // 手动更新 View
})

Controller 既要处理业务逻辑，又要亲自操作 DOM，两件事耦合在一起。

核心区别一句话 ​

模式谁来更新 View开发者写什么
MVCController 手动操作 DOM业务逻辑 + DOM 操作都要写
MVVMViewModel 自动双向绑定只写数据逻辑，DOM 更新交给框架

MVP 是 MVC 的改良版：用 Presenter 替代 Controller，把 View 和 Model 完全解耦（View 不直接引用 Model，Presenter 居中传话）。但仍然是手动更新，没有自动绑定。

模式View 与 Model 关系核心角色
MVC有耦合（Model 可直接通知 View）Controller 协调
MVP完全解耦（Presenter 居中）Presenter 手动传话
MVVM通过数据绑定自动同步ViewModel 自动双向绑定

MVVM 的优缺点 ​

优点：

  • 低耦合：View 和 Model 分离，ViewModel 可以绑定不同 View，视图逻辑复用性好
  • 可测试性高：ViewModel 不依赖 UI 控件，便于编写单元测试
  • 自动更新 DOM：双向绑定让数据变化自动同步视图，减少手动 DOM 操作

缺点：

  • Bug 难调试：数据绑定让 Bug 快速传播，界面异常时难以确定是 View 还是 Model 的问题；绑定声明写在模板里，无法断点调试
  • 内存开销大：大型模块中 Model 和 ViewModel 也会很大，长期持有不释放会消耗较多内存
  • 大型图形应用成本高：视图状态多时，ViewModel 的构建和维护成本较高

Vue 设计原则 ​

Vue 的四个核心设计理念：

  1. 渐进式框架：核心库只关注视图层，可以自底向上逐层引入——小项目只用核心特性，大项目再按需引入 Router、Vuex/Pinia、CLI 等，学习曲线平缓。
  2. 易用性：响应式数据、声明式模板、基于配置的组件系统，只需会 HTML/CSS/JS 即可上手，开发者专注业务逻辑即可。
  3. 灵活性：渐进式意味着从轻到重都有对应方案，不强制技术选型，也可以与已有项目或第三方库灵活整合。
  4. 高效性：虚拟 DOM + diff 算法保证渲染性能；Vue 3 引入 Proxy 响应式 + 编译期静态提升，进一步提升运行时效率。

Vue 和 React 的区别 ​

两者都是流行的前端框架、都用于构建用户界面，主要区别如下：

维度VueReact
组件化核心思想，单文件组件（SFC）把模板、样式、脚本封装在一个文件里一切皆组件，用 JSX 把模板和逻辑紧密结合
数据绑定提供 v-model 双向绑定单向数据流，靠 state / props 管理数据流向
模板语法模板语法，模板更接近传统 HTML 结构JSX，在 JS 中嵌套 XML 结构
学习曲线相对平缓，文档清晰、API 直观，适合初学者起步有一定曲线（JSX 与概念），掌握后灵活性强
生态系统生态相对较小但持续壮大生态更大、社区庞大、第三方库丰富
状态管理官方 Vuex（/ Pinia）Context API 或 Redux 等第三方库
组件通信props 加自定义事件等机制props 加回调函数，也可用 Context / Redux
应用场景中小型项目、单页应用、快速原型大型复杂项目、大型企业应用更普遍

选择哪个通常取决于项目需求、团队经验和开发者偏好。

面试回答 ​

MVC 里 Controller 协调 Model 和 View，视图和控制器偏单向、耦合较紧；MVVM 多了 ViewModel，通过双向数据绑定让视图和数据自动同步、组件更松散耦合，本质是数据驱动视图，Vue 的响应式加模板就是 MVVM 的体现。Vue 和 React 都是组件化、虚拟 DOM、数据驱动，区别在于 Vue 用模板（接近 HTML）加 v-model 双向绑定、上手快、官方生态全；React 用 JSX、单向数据流、生态更大，更适合大型项目。

参考来源 ​