MVVM

MVVM

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

可以看出来mvvm的model和view是分割开来的，所以我们可以不用关心Dom结构，而是关心数据如何储存

举个栗子

const cat = {
 name: 'jiumei',
 color: 'white'
}

我们把上面的变量看成是model,把要显示的页面看成是view,并假定他们已经被关联起来了

如果这个时候如果想修改页面上展示的猫的名字，我们不需要操作Dom,而是直接在javascript中修改对应的cat数据

cat.name = 'paipai'

从上面的的描述可以看出，改变JavaScript对象的状态，DOM结构也进行了对应的改变，因此如果我们想要修改view的展示内容就直接去修改js的对象就行了，是不是很方便

这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

MVC与MVVM区别

他们之间的区别主要是MVC中Controller演变成了MVVM中的viewModel。MVVM主要解决了MVC中大量的DOM操作带来的问题

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）

MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。