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

1. 首先解释:MVVM是什么?干什么用的?

1MVVM 是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的出现完美的解决了上面的几个问题:

1VVM 由 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

猜你喜欢

转载自blog.csdn.net/czj1049561601/article/details/115078883
今日推荐