前端面试--谈谈你对MVVM的理解？如何回答

1. 首先解释：MVVM是什么？干什么用的？

1：MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

2：其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

3：以Vue.js 为例。Vue是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。

4：它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发
更加高效、便捷。

上图来源博文：图文导航链接：https://www.jianshu.com/p/84ed38cbb5fa

2. 继续引出：为什么会出现MVVM? 框架的发展？ MVC----MVP----MVVM

最初的MVC–Model-View-Controller

1:最初是MVC:MVC是一种架构模式，M表示Model，V表示视图View，C表示控制器Controller
		    就是 模型—视图—控制器，也就是说一个标准的Web 应用程式是由这三部分组成的
		    
2:在HTML5 还未火起来的那些年，MVC 作为Web 应用的最佳实践是OK 的.

3:这是因为 Web 应用的View 层相对来说比较简单，前端所需要的数据在后端基本上都可以处理好

4:View 层主要是做一下展示，那时候提倡的是 Controller 来处理复杂的业务逻辑，所以View 层相对来说比较轻量，就是所谓的瘦客户端思想。

后来的MVP–Model-View-Presenter

3. 最终出现：为什么会出现MVVM? MVVM

1、 开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。

2、大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

3、 当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样
的工作不仅繁琐，而且很难维护复杂多变的数据状态。

MVVM的出现完美的解决了上面的几个问题：

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

2：在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数
据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
3：ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发
者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

3. Vue.js与MVVM的关系？

Vue.js 可以说是MVVM 架构的最佳实践，VUE并没有完全遵循MVVM，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁，很容易上手。

1;Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例
来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它
们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

上图引用自：https://blog.csdn.net/qq_29722281/article/details/99717680

本文参考的几篇介绍十分详细的博文链接：
1：前端框架MVC和MVVM的理：https://blog.csdn.net/qq_29722281/article/details/99717680
2:阮一峰讲解MVC\MVP以及MVVM:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
3：其中介绍到了vue的具体解析实现流程：https://www.codercto.com/a/33262.html