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

落日映苍穹つ 2022-11-12 02:48 591阅读 0赞

**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，保证视图和数据的一致性，这种轻量级的架构让前端开发
    更加高效、便捷。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]  
上图来源博文：[图文导航链接：https://www.jianshu.com/p/84ed38cbb5fa][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 层相对来说比较轻量，就是所谓的瘦客户端思想。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]

###### 后来的MVP–Model-View-Presenter ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]  
**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 来统一管理。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]  
**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 追踪依赖，在属性被访问和修改时通知变化。

![引用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]  
上图引用自：[https://blog.csdn.net/qq\_29722281/article/details/99717680][https_blog.csdn.net_qq_29722281_article_details_99717680]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221022/11924ba0e264414cba51c15741a50dc5.png
[https_www.jianshu.com_p_84ed38cbb5fa]: https://www.jianshu.com/p/84ed38cbb5fa
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221022/1a72c3a4b8f841c8ac4087d4be3c0c07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221022/76c6428ae8dc4d75b23ad2f8f710437c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]: /images/20221022/35452f60134e47a0a0195c4d560550a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]: /images/20221022/17266feda73245d1b0f265cc1260129a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]: /images/20221022/37216a92f7b442148d7b88e8bea890f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]: /images/20221022/cfe338bcfbca4372a14e31ce9870eaca.png
[https_blog.csdn.net_qq_29722281_article_details_99717680]: https://blog.csdn.net/qq_29722281/article/details/99717680
[2_MVC_MVP_MVVM_http_www.ruanyifeng.com_blog_2015_02_mvcmvp_mvvm.html]: http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
[3_vue_https_www.codercto.com_a_33262.html]: https://www.codercto.com/a/33262.html