vue面试题之MVVM详解

一、MVVM是什么？

• MVVM模式即 Model-View-ViewModel模式,是一种软件架构模式,MVVM是MVC的增强版,萌芽于2005年微软推出的基于window的用户界面框架WPF。软件架构模式： MVC、MVVM、MVP

二、MVVM详解

• Model层: 对应数据层的域模型（融合了行为和数据的域的对象模型）， 主要做域模型的同步。通过Ajax/fetch等API完成客户端和服务端业务Model的同步。在层间关系里，主要用于抽象出ViewModel中视图的Model。
• View层： 作为视图模板存在，在整个MVVM里，整个View是一个动态模板。除了定义结构、布局外，它展示的是ViewModel层的数据和状态。View层不负责处理状态，View层做的是数据绑定的声明、指令的声明、事件绑定声明。
• ViewModel层： 把View需要的层数据暴露，并对View层的数据绑定声明、指令声明、事件绑定声明负责。也处理View层的具体业务逻辑。ViewModel底层会做好绑定属性的监听。当ViewModel中数据发生变化，View 层会得到更 新；⽽当 View中声明了数据的双向绑定（通常是表单元素），框架也会监听View 层（表单）值的变化。⼀旦值变 化，View层绑定的 ViewModel中的数据也会得到⾃动更新。
  

三、MVVM的优缺点

3.1 优点

1. 分离视图（View）和模型（Model），降低代码耦合，提高视图或者逻辑的复用性；因为视图可以独立于model的变化和修改。ViewModel可以绑定在不同的view上，所以可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。例如table高度的控制都可以抽取成一段独立的逻辑，然后通过mixin混入的模式，让多个视图复用这段逻辑；
2. 提高可测试性，因为mvvm模式让视图和model层相互独立开来，所以可以让输入和输出在大致的可控范围内。
3. 自动更新dom: 利用双向绑定的原理，可以让数据更新后视图也自动更新，不用再让dom操作和逻辑操作混合在一起，让开发者从繁琐的手动dom中解散。

3.2 缺点

1. Bug很难被调试，因为使用了双向绑定的模式，页面出现异常的时候，很难判定到底是view层的问题还是model层的代码。数据绑定使得一个位置的bug被传递到别的位置，很难定位到出问题的原始地方。而且在视图中，大部门都是采用指令式，很难debgger;
2. 长期持久，不释放内容，可能会造成性能开销： 一个大的模块中，model也会很大，虽然保证了数据的一致性，可能不释放内存会造成更多的内存；
3. 对于大型的图形应用程序，状态多，viewModel的构建和维护的成本都会很高。