对于MVVM的理解、使用、MVC与MVVM的区别、MVVM应用场景

前言

持续学习总结输出中，今天分享的是对于MVVM的理解、使用、MVC与MVVM的区别、MVVM应用场景

MVVM

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。

Model 代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI组件，它负责将数据模型转化成UI展现出来。
ViewModel 监听数据的改变和控制视图行为、处理用户交互，简单的理解就是一个同步View 和 Model 的对象，连接Model 和 View 。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

为什么要使用MVVM

低耦合： 视图 View 可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候， View 也可以不变。
可复用： 可以把一些视图逻辑放到一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
独立开发： 开发人员可以专注于业务逻辑和数据的开发 ViewModel ，设计人员可以专注于页面设计。
可测试： 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

MVC与MVVM的区别

1、都是一种设计思想；

2、MVC 后端用的多，而 MVVM 是前端设计思想；

3、MVC 是单向通信，数据模型必须通过 Controller 层进行承上启下。MVVM 是将View 和 Model 实现自动同步，当 Model 属性改变时，不用再自己手动操作Dom元素，提高页面渲染性能。

MVVM应用场景

Vue.js
AngularJS
微信小程序

最后分享一句话：

想要不被淘汰只有一条路：一辈子不断学习，不断打造全新的自己。
《未来简史》

本次的分享就到这里了！！！