您的位置：首页 > 编程技术 > js  >  web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答

web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答

 更新时间：2021年9月24日 16:00  点击：2456

MVC和MVVM区别

前述

首先, 这两种都只是一种思想, 一种设计模式

很多编程语言根据这种思想设计出了很多框架, 例如Java中的SpringMVC, PHP中的ThinkPHP , JavaScript中的Vue、React、Angular等

MVC

概述

 

1.数据要渲染到视图上
  定义一个模板引擎
  得到数据
  再将数据渲染到模板引擎中

2.视图操作控制器
  在页面上的按钮中添加点击事件
  在事件中调用方法
  控制器再发送请求去修改数据

3.通过方法发送网络请求修改数据
  再发送网络请求得到修改后的数据
  再将数据渲染到视图上

优缺点

优点:

降低耦合，便于代码的维护和扩展

缺点:

每次数据更新之后，都需要操作dom, 影响开发效率;

MVVM

 

概述

前言

为了提高开发效率，出现了新的思想：MVVM。它最大的特点：双向数据绑定;

当M中的数据发生改变时，V中的数据会自动发生改变当V中的数据发生改变时，M中的数据会自动发生改变;

MVVM是MVC的进步, 是MVC的替代品。

特点：

当M改变时，V会自动改变当V改变时，M会自动改变

关系：

一旦M改变，VM会检测会M的变化，会自动去修改V

一旦V改变， VM会检测到V的变化，会自动去修改M

有了MVVH之后，所有的dom操作都是由vm来操作，减少了程序员工作量，程序员就可以将大量的时间用在业务逻辑上，而不是dom操作上。

MVVM实现者 — Vue

在这里插入图片描述

Vue为什么没有完全遵守MVVM?

在这里插入图片描述

原话来源于Vue官网作者自述, 但是作者并没有给出原因, 根据查阅和自己整理, 认为有2点原因

原因一: mvvm是指 “模型-视图-视图模型”, 应该是让"模型"和"视图"实现完全的解耦, 但是vue中提供了一个属性: ref, 通过ref可以拿到dom对象，通过ref直接去操作视图。这一点上，违背了mvvm;

原因二: 如下图, 结构上, “数据层"包含在了"数据模型层”, 这两个部分没有完全独立出来

在这里插入图片描述

以上就是web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答的详细内容，更多关于MVC与MVVM的资料请关注猪先飞其它相关文章！

[!--infotagslink--]

相关文章

  • Springboot如何实现Web系统License授权认证

    这篇文章主要介绍了Springboot如何实现Web系统License授权认证,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-28

  • C#使用Http Post方式传递Json数据字符串调用Web Service

    这篇文章主要为大家详细介绍了C#使用Http Post方式传递Json数据字符串调用Web Service，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • InterlliJ IDEA2020新建java web项目找不到Static Web的解决

    这篇文章主要介绍了InterlliJ IDEA2020新建java web项目找不到Static Web的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-02

  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-11

  • jQuery mobile 移动web(6)

    这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21

  • SpringMVC文件上传原理及实现过程解析

    这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15

  • C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?

    这篇文章主要介绍了C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?,这也小编做.NET项目时经常思考和让人混乱的一个问题,这篇文章写的挺好,一下清晰了许多,需要的朋友可以参考下...2020-06-25

  • 使用Maven 搭建 Spring MVC 本地部署Tomcat的详细教程

    这篇文章主要介绍了使用Maven 搭建 Spring MVC 本地部署Tomcat,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-16

  • SpringMvc自动装箱及GET请求参数原理解析

    这篇文章主要介绍了SpringMvc自动装箱及GET请求参数原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19

  • SpringMvc获取请求头请求体消息过程解析

    这篇文章主要介绍了SpringMvc获取请求头请求体消息过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-17

  • Springmvc ResponseBody响应json数据实现过程

    这篇文章主要介绍了Springmvc ResponseBody响应json数据实现过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-26

  • Microsoft Expression Web 简体中文正式版 官方下载地址

    Microsoft Expression Web 简体中文正式版相对于早期的 Microsoft Expression Web Designer CTP1(英文)除了它是正式的中文版外，有进步的地方1.对标签的id名称加上了css的代...2020-06-25

  • Tomcat首次部署web项目流程图解

    这篇文章主要介绍了Tomcat首次部署web项目流程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-11

  • jQuery UI结合Ajax创建可定制的Web界面

    这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面，如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI，感兴趣的小伙伴们可以参考一下...2016-06-24

  • web项目开发之JS函数防抖与节流示例代码

    这篇文章主要介绍了web项目开发之JS函数防抖与节流实现的示例代码及原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助...2021-09-24

  • 基于C#后台调用跨域MVC服务及带Cookie验证的实现

    本篇文章介绍了，基于C#后台调用跨域MVC服务及带Cookie验证的实现。需要的朋友参考下...2020-06-25

  • 创建一个完整的ASP.NET Web API项目

    ASP.NET Web API具有与ASP.NET MVC类似的编程方式，ASP.NET Web API不仅仅具有一个完全独立的消息处理管道，而且这个管道比为ASP.NET MVC设计的管道更为复杂，功能也更为强大。下面创建一个简单的Web API项目，需要的朋友可以参考下...2021-09-22

  • Web制作验证码功能实例代码

    web开发中，经常会使用验证码功能，例如登录、注册，或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码，感兴趣的朋友一起看看吧...2017-06-24

  • 理解javascript中的MVC模式

    这篇文章主要为大家介绍了javascript中的MVC模式，MVC是一种软件架构模式，一般把软件模式分为三部分，本文就针对MVC模式的三部分进行讲解，感兴趣的小伙伴们可以参考一下...2016-02-01

  • Spring MVC 处理一个请求的流程

    Spring MVC是Spring系列框架中使用频率最高的部分。不管是Spring Boot还是传统的Spring项目，只要是Web项目都会使用到Spring MVC部分。因此程序员一定要熟练掌握MVC部分。本篇博客简要分析Spring MVC处理一个请求的流程。...2021-02-06