前端面试 vue 部分 (1)——谈谈你对 MVVM 的理解

【答案】

MVVM 由 Model、View、ViewModel 三部分构成

  • Model 代表数据模型,也可以在 Model 中定义数据修改和业务逻辑;

  • View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来;

  • ViewModel 是一个同步View 和 Model的对象;

[扩展问题]:为什么会出来MVVM

当业务程度越来越复杂时,MVC暴露出了很多问题,而MVVM就是为了解决这些问题出现的

当前端发展起来后,这时前端开发就暴露出了三个痛点问题:

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

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

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

其实,早期 jquery 的出现就是为了前端能更简洁的操作 DOM 而设计的,但它只解决了第一个问题,另外两个问题始终伴随着前端一直存在。 MVVM 的出现,完美解决 了 以上三个问题 。

[扩展问题]:什么是MVC

  1. MVCModel-View-Controller 的缩写,即 模型—视图—控制器

  • Model:后端传递的 数据

  • View:所看到的 页面

  • Controller:页面 业务逻辑

  1. MVC是 单向通信 。即View和Model,必须通过Controller来承上启下。

  2. 使用MVC的 目的 就是 将M和V的代码分离

[扩展问题]:MVC和MVVM的关系

MVVM是将之前的MVC后端开发:

  • M:model数据库中的数据

  • V:view前端页面

  • C:controller后端控制器

中的V即View分成了MVVM模式

MVVM模式:不需要用户手动的操作dom的,主要是实现数据双向绑定

(0)

相关推荐

  • C#框架结构分层:三层结构,DDD,MVC,MVVM,MVP

    本文主题,讲解主要有哪些分层思想. 一.三层结构 作为早期程序开发的经典,这是一个完全由程序员自己控制的分层思想. 在我们自己所有的项目中,几乎是无处不在,无时无刻不在使用. 它的主要思想是分界面层( ...

  • 浅谈MVC、MVP、MVVM架构模式的区别和联系

    MVC.MVP.MVVM这些模式是为了解决开发过程中的实际问题而提出来的,目前作为主流的几种架构模式而被广泛使用. 一.MVC(Model-View-Controller) MVC是比较直观的架构模式 ...

  • 对MVC、MVP、MVVM的理解(一)

    一.MVC MVC模式再网上的争议是最大的,一些博客中是这样描述的 MVC模式的通信是单向的,View触发事件或数据的提交,到了Controller进行处理逻辑之后,返回Model给View,View ...

  • 软件架构编年史:MVC及其变种

    原创 覃宇 逸言 5天前 覃宇,Android开发者/ThoughtWorks技术教练//译者,热衷于探究软件开发的方方面面,从端到云,从工具到实践.喜欢通过翻译来学习和分享知识,译作有<Kot ...

  • 前端面试 vue 部分 (2)——Vue是如何实现双向绑定的

    数据的双向绑定 当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel 也能监听到视图的变化,然后通知数据做改动,这实际上就实 ...

  • 前端框架VUE面试基础问答

    VUE属于现在比较热门的前端框架,因为VUE好上手学习起来也不难,所以有时间还想从事前端的朋友还请认真看完. 什么是VUE? 首先Vue.js(VUE),是一套用于构建用户界面的渐进式JavaScri ...

  • 电商系统研究学习:前端架构 vue

    电商系统研究学习:前端架构&#160;vue

  • 前端面试每日 3+1 —— 第645天

    今天的知识点(2021.01.20)-- 第645天 [html]本地存储和cookie之间的区别是什么? [css]在Less中有哪些不同类型的函数? [js]写一个JS方法,判断元素是否在可视区域 ...

  • 前端面试每日 3+1 —— 第509天

    今天的知识点(2020.09.06)-- 第509天 [html]如何优化大数据列表(10万+)的性能?说说你的方案 [css]flex:1与flex:auto有什么区别? [js]SeaJS和Req ...

  • 前端面试每日 3+1 —— 第481天

    今天的知识点(2020.08.09)-- 第481天 [html]button标签的type默认值是什么呢? [css]position的relative和absolute分别是相对谁进行定位的? [ ...

  • 前端面试每日 3+1 —— 第457天

    今天的知识点(2020.07.16)-- 第457天 [html]写一个鼠标跟随的特效 [css]page-break-before和page-break-after属性有什么应用场景? [js]js ...

  • 前端面试每日 3+1 —— 第454天

    今天的知识点(2020.07.13)-- 第454天 [html]p标签里面嵌套img标签会出现向上高3像素是什么原因?如何处理? [css]请说说css的三大特性是什么? [js]客户端与服务端时间 ...

  • 前端面试每日 3+1 —— 第453天

    今天的知识点(2020.07.12)-- 第453天 [html]表单可以跨域吗? [css]css子元素会继承父元素的font-size吗?请解释下面父子元素各字体的大小[代码] [js]给你一个页 ...