Vue中的MVVM

一、为什么会有MVVM框架？

在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定，极大了提高了开发效率。

MVVM 的出现，完美解决了以上的问题。
MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

二、什么是MVVM呢？

MVVM就是Model-View-ViewModel
Model就是数据模型（亦指数据层）可以是我们固定死的数据，也可以是来自服务器请求来的数据。
View就是页面DOM（亦指视图层）主要就是向用户展示信息的。
ViewModel 在vue中就是指vue实例（亦指数据模型层）充当View与Model之间通信的桥梁。

各层的作用：

• View层：
  ①视图层
  ②在前端开发中就是DOM层
  ③主要作用是给用户展示各种信息
• Model层：
  ①数据层
  ②数据可能是固定的死数据，更多是来自于服务器，从网络上请求下来的数据。
• ViewModel层：
  ①视图模型层
  ②视图模型层是View和Model沟通的桥梁
  ③一方面它实现了Data Bindings来进行数据的绑定，将Model的改变实时反映到View中
  ④另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击，滚动，touch）时，可以监听到，并在需要的情况下改变对应的Data。

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

具体的双向绑定的实现见：https://blog.csdn.net/weixin_44019523/article/details/113574552