脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → MVC与MVVM区别及Vue为什么不完全遵守MVVM

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

 更新时间：2021年09月24日 12:02:25   作者：SpringSir  
这篇文章主要介绍了web面试中常问问题，MVC与MVVM区别以及Vue为什么不完全遵守MVVM的难点解答，有需要的朋友可以借鉴参考下，希望能够有所帮助

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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 使用vue构建移动应用实战代码

    使用vue构建移动应用实战代码

    本篇文章主要介绍了使用vue构建移动应用实战代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • element ui富文本编辑器的使用效果与步骤(quill-editor)

    element ui富文本编辑器的使用效果与步骤(quill-editor)

    富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,下面这篇文章主要给大家介绍了关于element ui富文本编辑器的使用效果与步骤(quill-editor)的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue中使用vux的配置详解

    Vue中使用vux的配置详解

    这篇文章主要为大家详细介绍了Vue中使用vux配置的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • ResizeObserver loop limit exceeded报错原因及解决方案

    ResizeObserver loop limit exceeded报错原因及解决方案

    这篇文章主要给大家介绍了关于ResizeObserver loop limit exceeded报错原因及解决的相关资料,公司项目监听系统中发现一个高频错误ResizeObserver loop limit exceeded,而浏览器的console中却没有提示,需要的朋友可以参考下
    2023-09-09
  • vue如何实现自定义步骤条

    vue如何实现自定义步骤条

    这篇文章主要介绍了vue如何实现自定义步骤条问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue中的插槽详解

    vue中的插槽详解

    这篇文章主要介绍了Vue中的插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-10-10
  • 在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总

    在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总

    在 Vue 3 项目开发中,为了方便管理和引用文件路径,设置 @ 指向根目录是一项常见的需求,下面给大家分享在Vue3中设置 `@` 指向根目录的方法汇总,感兴趣的朋友一起看看吧
    2024-06-06
  • 如何通过shell脚本自动生成vue文件详解

    如何通过shell脚本自动生成vue文件详解

    这篇文章主要给大家介绍了关于如何通过shell脚本自动生成vue文件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 加载 vue 远程代码的组件实例详解

    加载 vue 远程代码的组件实例详解

    vue-cli 作为 Vue 官方推荐的项目构建脚手架，它提供了开发过程中常用的，热重载，构建，调试，单元测试，代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发
    2017-11-11
  • 详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

    详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

    这篇文章主要介绍了详解关于表格合并span-method方法的补充(表格数据由后台动态返回) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05

最新评论