大前端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个区域，而不用手动更新它们。