Vue之理解MVVM模型

M：模型（Model）：对应data中的数据
V：视图（View）：模板
VM：视图模型（ViewModel）：Vue实例对象

MVVM是什么？

MVVM是05年微软推出的基于Windows的用户界面框架WPF。前端最早的MVVM框架knockout在·10 年发布。

M：Model层：

对应·数据层的域模型，主要做域模型的同步。通过Ajax/fetch等API完成客户端和服务端业务Model的同步。

V：View层：

作为试图模板的存在，在MVVM里，整个View是一个动态的模板。除定义结构、布局外，展示的是ViewModel层的数据和状态。View层做的是数据绑定的声明、指令的声明、事件绑定的声明。

VM: ViewModel层：

把View需要的数据暴露，并对View层的数据绑定声明、指令声明、事件绑定声明负责。就是它得负责处理视图层的具体业务逻辑。并且还会监听Model 模型层的数据变换。如果数据绑定为单行绑定，Model层数据变化，View层的数据也会进行更新。如果进行数据的双向绑定，会同时监听View层和Model层的数据变化，一边发生变化，另一边的数据也会进行自动更新。

优缺点

优点：
1、将视图和模型（就是页面展示和页面数据）分开，降低了代码的耦合性。
2、提高代码的可测性。
3、自定更新数据，利用双向绑定，模型数据更新后，视图会进行自动更新，解决了之前DOM的繁琐操作。
缺点：

1、Bug难调试：双向绑定，出现bug，可能会出现在View上，也可能是Model上。并且数据绑定的声明是在View的模板正通过指令式来实现的，这部分是不能debug
2、模块越大，他的数据量也会越来越大，会浪费内存空间。
3、对于大型的图形应用程序，视图状态较多，VM的构建和维护成本会比较高。