1 谈谈你对MVVM的理解

⚡ 30 秒速记

• MVVM = Model（数据）+ View（界面）+ ViewModel（中间的桥）
• 一句话：数据改了界面自动变，界面输入了数据自动改，不用手动碰 DOM
• 对比 MVC：Controller 里要手写「取数据 → 改 DOM」的胶水代码，MVVM 把这层交给数据绑定
• 在 Vue 里 ViewModel 就是组件实例：响应式系统 + 模板编译 + 虚拟 DOM 一起干活
• 真正的价值：状态是唯一的事实来源，视图 = f(state)，别再拿选择器去改文本

MVVM 说白了就是加了一个 ViewModel 当中间人，数据一变界面自动跟着变，你不用再手动操作 DOM。 以前 jQuery 时代拿到接口数据，要自己 $('#name').text(data.name)，页面一复杂就到处是这种胶水代码。在 Vue 里组件实例就是 ViewModel：data 是 Model，模板是 View，你只改 this.name = 'Tom'，响应式系统发现变化，自动重新渲染。反过来 v-model 让输入框的值写回数据。我觉得它最大的好处不是少写代码，而是界面永远由状态决定，排查问题只要看数据对不对。

为什么要有这些模式，目的：职责划分、分层（将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.