区别:1、mvvm各部分的通信是双向的,而mvc各部分通信是单向的。2、MVVM实现了view与model的自动同步,也就是model属性改变时,不需要手动操作dom元素去改变view的显示,而是改变属性后该属性对应的view层会自动改变。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
VUE是基于MVVM的设计模式开发的,今天说一下MVC和MVVM的区别。
MVC:
m:model数据模型层 v:view视图层 c:controller控制器
原理:c层需要控制model层的数据在view层进行显示
MVC两种方式,图片说明:
代码实例:
我们做一个很简单的p显示隐藏的效果,点击toggle可以切换下面p显示隐藏
html:
<div id="box"> <button class="btn">toggle</button> <button class="btn2">big</button> <div class="box"> </div> </div>
JS:
下面是我们不用设计模式写的JS,这种写法不利于维护,纯粹的面向过程去写代码:
let btn = document.getElementsByClassName("btn")[0]; let boxDom = document.getElementsByClassName("box")[0]; let flag = true; btn.onclick = function(){ if(flag){ boxDom.style.display = "none"; flag = false; }else{ boxDom.style.display = "block"; flag = true; } }
MVC的写法:
//view let boxDom = document.getElementsByClassName("box")[0]; //model let model = { isShow:true, isBig:false } //controller 业务逻辑 function Controller(){ this.init();//初始化 } Controller.prototype = { constructor:Controller, init:function(){ this.addEvent() }, addEvent:function(){ let btn = document.getElementsByClassName("btn")[0]; let btn2 = document.getElementsByClassName("btn2")[0]; let that = this; btn.onclick = function(){ model.isShow = !model.isShow; //更改视图了 that.render(); } btn2.onclick = function(){ model.isBig = true; //更改视图了 that.render(); } }, render:function(){//数据驱动视图的更改 boxDom.style.display = model.isShow?"block":"none"; boxDom.style.width = model.isBig?"300px":"100px"; } } new Controller();//初始化一下
虽然MVC代码比较长,不过以后用起来很方便,只要是相同的效果拿过来用就行
下面说一下MVVM
MVVM:
m:model数据模型层 v:view视图层 vm:ViewModel
vue中采用的是mvvm模式,这是从mvc衍生过来的
MVVM让视图与viewmodel直接的关系特别的紧密,就是为了解决mvc反馈不及时的问题
图片说明一下:
说到MVVM就要说一下双向绑定和数据劫持的原理,
1、双向绑定的原理是什么?
(当视图改变的时候更新模型层,当模型层改变的时候更新视图层)
vue中采用了数据劫持&订阅发布模式:
vue在创建vm的时候,会将数据配置在实例当中,然后会使用Object.defineProperty对这些数据进行处理,为这些数据添加getter与setter方法。当获取数据的时候,会触发对应的getter方法,当设置数据的时候,会触发对应的setter方法,从而进一步触发vm上的watcher方法,然后数据了,vm进一步去更新视图。
2、 数据劫持:
vue.js 则是采用数据劫持结合发布者-订阅者模式,通过Object.defineProperty()来劫持各个属性的setter,getter。在数据变动时发布消息给订阅者,触发响应的监听回调。
Object.defineProperty代码实例:
//Object.defineProperty 因为使用了ES5的很多特性 let _data = {} let middle = 111; Object.defineProperty(_data,"msg",{ get(){ return middle; }, set(val){ middle = val; } }); console.log(_data.msg);//获取数据的时候,会调用对应对象属性的getter方法 _data.msg = 222;//设置数据的时候,会调用对应对象属性的setter方法 console.log(_data.msg);
总结:
mvvm与mvc最大的区别:
MVVM实现了view与model的自动同步,也就是model属性改变的时候, 我们不需要再自己手动操作dom元素去改变view的显示,而是改变属性后该属性对应的view层会自动改变。
相关推荐:《vue.js教程》
以上是vue中mvvm和mvc的区别是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载
最流行的的开源编辑器

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver CS6
视觉化网页开发工具