vue面试题之什么是mvvm

什么是mvvm

m  --  代表 model 层      v  --  代表 view 层  vm  --  代表 Viewmodel 层

Model层: 数据模型层
通过 Ajax , fetch 等 API 完成客户端和服务端业务模型的同步。

View层: 视图层
作为视图模板存在，其实View就是一个动态模板。

ViewModel层: 视图模型层
负责暴露数据给View层，并对View层中的数据绑定声明、指令声明、事件绑定声明,进行实际的业务逻辑实现。

数据变化了,视图自动更新   ==>    ViewModel底层会做好监听Object.defineProperty，当数据变化时，View层会自动更新

视图变化了,绑定的数据自动更新  ==>     会监听双向绑定的表单元素的变化，一旦变化，绑定的数据也会得到自动更新。

流程图如下:

MVVM的优缺点有哪些?

优点:

1. 实现了视图(View）和模型(Model)的分离，降低代码耦合、提高视图或逻辑的复用性
2. 提高了可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
3. 能自动更新DOM︰利用双向绑定，数据更新后视图自动更新，让开发者从繁琐的手动操作DOM中解放出来
    

缺点:

1). Bug难被调试:因为使用了双向绑定的模式，当我们看到界面发生异常了，有可能是View的代码产生的Bug,也有可能是Model代码的问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了

  调试方案:

• 注释掉一段代码,确定代码的位置
• debugger打断点或者console进行调试

2). 在一个大的模块中Model也会很大，虽然使用上来说方便了，但如果长期持有不释放内存，就会造成更多的内存消耗