1 谈谈你对MVVM的理解

⚡ 30 秒速记

• MVVM = Model（数据）+ View（视图）+ ViewModel（连接两者的中间层）
• 核心是 ViewModel 通过数据绑定自动同步两个方向，开发者不再手动操作 DOM
• 相比 MVC：MVC 的 Controller 要手写"取数据 → 更新视图"的胶水代码，MVVM 把这层自动化了
• Vue 的 ViewModel 由响应式系统 + 模板编译 + 虚拟 DOM 共同实现
• 实际价值不是"少写代码"，而是让状态成为唯一事实来源，视图永远是状态的函数

MVVM 就是用 ViewModel 连接 Model 和 View，让数据变化能自动反映到界面。 相比 MVC 中手动编写控制器来取数据、更新视图，它把这部分同步工作交给数据绑定，开发者通常不需要直接操作 DOM。在 Vue 中，响应式系统负责感知状态变化，模板把状态映射成视图，事件再修改状态。它的价值是降低界面与业务的耦合，让数据成为视图更新的依据。

为什么要有这些模式，目的：职责划分、分层（将Model层、View层进行分类）借鉴后端思想，对于前端而已，就是如何将数据同步到页面上

MVC模式 代表：Backbone + underscore + jquery

• 传统的 MVC 指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理，控制器会获取数据。将结果返回给前端,页面重新渲染
• MVVM：传统的前端会将数据手动渲染到页面上, MVVM 模式不需要用户收到操作 dom 元素,将数据绑定到 viewModel 层上，会自动将数据渲染到页面中，视图变化会通知 viewModel层 更新数据。ViewModel 就是我们 MVVM 模式中的桥梁

MVVM模式 映射关系的简化，隐藏了controller

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

• Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为
• View: 用户操作界面。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View
• ViewModel： 业务逻辑层，View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.

总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。