Vue中对MVVM模型的理解

1.什么是MVVM？

MVVM是Model-View-ViewModel的简写，是M - V - VM 三部分组成。

• 本质：是MVC改进版
• MVVM就是将其中View的状态和行为抽象化，其中ViewModel将试图（即View）和业务逻辑分开，它可以去除Model的数据的同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

MVVM采用：双向数据绑定

• View中数据变化将自动反映到Model上，反之，Model中数据变化也将会自动展示在页面上。
• ViewModel就是View和Model的桥梁。
• ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回到Model。
• MVVM的核心思想：就是关注Model的变化。让MVVM框架利用自己的机制自动更新DOM（即View视图），也就是所谓的数据-视图分离。

2.MVVM模型

• M：模型Model，即data中的数据
• V：视图View，即模板代码，页面展示部分
• VM：视图模型ViewModel，即Vue实例

 3.MVVM的优点

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

1. 低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的“View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
3. 独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码
4. 可测试，界面素来是比较难于测试的，测试可以针对ViewModel来写

 4.MVVM的缺点

1. Bug很难被调试: 因为使用双向绑定的模式，当看到界面异常了，有可能是View的代码有Bug，也可能是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。
2. 据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的一个大的模块中model也会很大，虽然使用方便了也很容易保证了数据的一致性，当时长期持有，不释放内存就造成了花费更多的内存对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高。

5.MVVM框架与MVC框架的区别

1. mvc 中 Controller演变成 mvvm 中的 viewModel
2. mvvm 通过数据来驱动视图层的显示而不是节点操作。
3. mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互，而是通过中间桥梁ViewModel来同步
4. mvvm主要解决了:mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

6.MVVM应用场景

• 针对具有复杂交互逻辑的前端应用
• 提供基础的架构抽象
• 通过Ajax数据持久化，保证前端用户体验

7.MVVM的实现原理：

MVVM的实现主要是三个核心点框架：

1. 响应式：vue如何监听data的属性变化
2. 模板解析：vue的模板是如何被解析的
3. 渲染：vue模板是如何被渲染成HTML的