0

0

vue中mvvm和mvc的区别有哪些

青灯夜游

青灯夜游

发布时间:2022-12-27 17:59:23

|

2568人浏览过

|

来源于php中文网

原创

mvvm和mvc的区别:1、mvvm各部分的通信是双向的,而mvc各部分通信是单向的。2、MVVM实现了view与model的自动同步,也就是model属性改变时,不需要手动操作dom元素去改变view的显示,而是改变属性后该属性对应的view层会自动改变。

vue中mvvm和mvc的区别有哪些

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

MVC是什么


MVC是一种设计模式:

M(Model):模型层。是应用程序中用于处理应用程序数据逻辑的部分,模型对象负责在数据库中存取数据;
V(View):视图层。是应用程序中处理数据显示的部分,视图是依据模型数据创建的;
C(Controller):控制层。是应用程序中处理用户交互的部分,控制器接受用户的输入并调用模型和视图去完成用户的需求,控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示返回的数据。

立即学习前端免费学习笔记(深入)”;

1.png

2.png

MVVM是什么


vue框架中MVVM的M就是后端的数据,V就是节点树,VM就是new出来的那个Vue({})对象

M(Model):模型层。就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model。
V(View):视图层。就是展现出来的用户界面。
VM(ViewModel):视图模型层。连接view和model的桥梁。因为,Model层中的数据往往是不能直接跟View中的控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

3.png

 View与ViewModel之间通过双向绑定建立联系,这样当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然。

4.png

MVVM的优势

Pixie.haus
Pixie.haus

AI像素图像生成平台

下载

1、mvc和mvvm都是一种设计思想。 主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量DOM操作使页面渲染性能降低,加载速度变慢的问题 。

2、MVVM与MVC最大的区别就是:它实现了View和Model的自动同步:当Model的属性改变时,我们不用再自己手动操作Dom元素来改变View的显示,它会自动变化。

3、整体看来,MVVM比MVC精简很多,我们不用再用选择器频繁地操作DOM。

MVVM并不是用VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现

MVC与MVVM有什么区别


区别一:

mvvm各部分的通信是双向的,而mvc各部分通信是单向的。

区别二:

MVVM 与 MVC 最大的区别就是:它实现了View和Model的自动同步

  • 当Model属性改变时,不用手动操作Dom元素去改变View的显示。

  • 而改变属性后,该属性对应View的显示会自动改变

MVVM响应式原理


  • vue是采用数据劫持配合发布者-订阅者的模式的方式,
    • 通过Object.defineProperty()来劫持各个属性的getter和setter
    • 在数据变动时,发布消息给依赖收集器(dep中的subs),去通知(notify)观察者,做出对应的回调函数,更新视图
  • MVVM作为绑定的入口,整合Observer,Compile和Watcher三者,
    • 通过Observer来监听model数据变化,
    • 通过Compile来解析编译模板指令,
    • 最终利用Watcher搭起Observer,Compile之间的通信桥路,
    • 达到数据变化Observer)=>视图更新视图交互变化=>数据model变更的双向绑定效果。

【相关推荐:vuejs视频教程web前端开发

相关文章

相关标签:

vue

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

99

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

132

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

15

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

63

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue.js 2.0 从入门到实战
Vue.js 2.0 从入门到实战

共192课时 | 15万人学习

vue 3.0全新实战课程-第一季
vue 3.0全新实战课程-第一季

共51课时 | 23万人学习

麦子学院Vue.js视频教程
麦子学院Vue.js视频教程

共30课时 | 8.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号