---

提示：片尾总结了要点，硬背的话直接跳到最后

前言

相信持续关注我文章的小伙伴知道我之前就MVC和MVVM做过较为详细的讲解，但是我发现，他依旧是概念性很强，只能帮助大家理解并不能帮助大家记住较为重要的点，加之这又是前端面试的高频题目之一，所以这一期我们来做一个 既要又要 的知识点解析

---

一、MVC的基本逻辑

MVC说白了只是一套软件业务逻辑实现的架构模式，

• Model：数据模型，用来存储数据；
• View：视图界面，用来展示UI界面和响应用户交互；
• Controller：控制器(交流中心)，监听模型数据的改变和控制视图行为、处理用户交互 ；

在这个模式中，看似每个环节有着合理的单向流动关系，可实际上而言，面对较为复杂逻辑的时候，他的不便捷性就体现出来了，比如当数据发生改变时，我们需要先通知controller，然后由他指挥进行接下来的包括数据修改、视图修改等，再加之controller中需要咱们手动进行大量的DOM节点操作，增加代码的同时也耗费了不少的性能，非明智之举

不能说他不好，他彻底让咱们告别了非图形界面，但这套逻辑说白了很适合后端但不适合日益复杂的前端页面（高交互性），so，救世主来了

二、MVVM的基本逻辑

MVVM由MVC改进而来，相当于从手动挡（单向逻辑）实现了向自动挡（双向沟通）的进化，让前端更加关注操控（复杂页面实现），优势显而易见

• Model：数据模型，用来存储数据；
• View：视图界面，用来展示UI界面和响应用户交互；
• ViewModel：抽象化的新角色，充当View与Model之间的枢纽，封装视图逻辑，并实现数据绑定，让Model与View的同步实现自动化；

我们显而易见的，通过一个中间者的角色的管理，使得我们更容易达成交互的目的，只要视图的数据发生改变，viewmodel会自动帮我们完成数据的修改，这也是他最大优点一 数据双向绑定 的实现，再结合 vue 或者React这样的框架可进一步实现 虚拟DOM操作 ；可以说，在业务上与前端的需求更吻合；

---

总结

自动化数据绑定
数据与视图自动同步（双向绑定），无需手动操作 DOM，减少冗余代码。

声明式编程
开发者关注“做什么”（如 {{ data }}），而非“怎么做”（DOM 操作），代码更简洁。

高效维护性
数据和视图解耦，业务逻辑集中管理，避免 UI 更新遗漏导致的 Bug。

组件化支持
天然契合组件化开发（如 Vue/React），提升代码复用和团队协作效率。

性能优化
框架级优化（如虚拟 DOM）减少直接操作真实 DOM 的开销，提升渲染效率。

总之：MVVM 通过自动化数据绑定和声明式编程，解决了 MVC 手动同步数据和视图的痛点，显著提升开发效率和代码可维护性

下节预告：既然已经说到了双向绑定，那么vue 双向数据绑定的原理和组件化开发 必定是逃不过的问题，点击直接查看下节>>>
vue 双向数据绑定的原理 、组件化开发