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中的侦听器是一种响应式机制,可以对指定的数据进行监听,并在数据变化时执行相应的回调函数。常用于监听复杂数据类型的变化,如对象和数组。通过侦听器,可以实现数据的自动更新和逻辑处理等功能,提高代码的可读性和可维护性
    2023-05-05
  • vue3的watch用法以及和vue2中watch的区别

    vue3的watch用法以及和vue2中watch的区别

    这篇文章主要介绍了vue3的watch用法以及和vue2中watch的区别,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 关于实现Vue3版抖音滑动插件踩坑指南

    关于实现Vue3版抖音滑动插件踩坑指南

    这篇文章主要给大家介绍了关于实现Vue3版抖音滑动插件踩坑指南,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • vue中mock数据,模拟后台接口实例

    vue中mock数据,模拟后台接口实例

    这篇文章主要介绍了vue中mock数据,模拟后台接口实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    这篇文章主要介绍了在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 解决Vue项目中Emitted value instead of an instance of Error问题

    解决Vue项目中Emitted value instead of an 

    这篇文章主要介绍了解决Vue项目中Emitted value instead of an instance of Error问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue集成百度地图实现位置选择功能

    Vue集成百度地图实现位置选择功能

    由于添加门店时,需要选择门店的省、市、区、详细地址、以及门店的经纬度信息,本文给大家分享Vue集成百度地图实现位置选择功能,感兴趣的朋友一起看看吧
    2022-06-06
  • vue循环数组改变点击文字的颜色

    vue循环数组改变点击文字的颜色

    这篇文章主要为大家详细介绍了vue循环数组改变点击文字的颜色,非常实用的切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 学习Vue组件实例

    学习Vue组件实例

    本篇文章给大家分享了Vue实例的相关内容以及重要知识点,对此有兴趣的朋友可以跟着学习参考下。
    2018-04-04
  • Vue中引用assets中图片的实现方式

    Vue中引用assets中图片的实现方式

    这篇文章主要介绍了Vue中引用assets中图片的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论