HTML5教程

大前端MVVM解读

本文主要是介绍大前端MVVM解读,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

什么是MVVM

MVVM,是Model-View-ViewModel的简写,是M-V-VM三部分组成。它本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化,其中ViewModel将视图UI和业务逻辑分开,它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

讲完了MVVM我们要来看看VUE

为什么要是用vue

优点一:模块化(也是angularjs的优点)
这个就是配合maven项目的module模块思想,使得项目开发,项目架构更加的清晰明了。
优点二:虚拟dom

1.真实dom
<div id="wrap">
  <p class="title">Hello world!</p>
</div>

2.虚拟dom
var VNode = {
    tag:'div',
    attrs:{
        id:'wrap'
    },
    children:[
        {
            tag:'p',
            text:'Hello world!',
            attrs:{
                class:'title',
            }
        }
    ]
};

虚拟dom的主要功能就是实现MVVM架构,viewmodel层来帮助model层处理数据,做到页面的实时显示,实时绑定,可以不用刷新页面,增加页面并发和运行速度。可以再f12页面控制台,直接修改虚拟dom中的属性来改变页面显示内容,这就是MVVM的优势,这里就是因为VUE的出现,辅助了MVVM的崛起。

MVVM和MVC的区别

MVC层是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。
View传送指令到Controller Controller完成业务逻辑后,要求Model改变状态 Model将新的数据发送到View,用户得到反馈。
MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。采用双向数据绑定,View的变动,自动反映在 ViewModel,反之亦然。
在MVVM模式中ViewModel层,就是View和Model层的粘合剂,他是一个放置用户输入验证逻辑,视图显示逻辑,发起网络请求和其他各种各样的代码的极好的地方。说白了,就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。

MVVM和MVC区别总结

  • 在MVC里,View是可以直接访问Model的,所以View里会包含Model信息以及一些业务逻辑。 MVC模型关注的是Model的不变,所以在MVC模型里,Model不依赖于View,但是 View是依赖于Model的。不仅如此,因为有一些业务逻辑在View里实现了,导致要更改View也是比较困难的,至少那些业务逻辑是无法重用的。
  • MVVM在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把model绑定到UI的元素上。此外MVVM另一个重要特性双向绑定,它更方便你去同时维护页面上都依赖于某个字段的N个区域,而不用手动更新它们。
这篇关于大前端MVVM解读的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!