MVVM和MVC区别，和vue里MVVM的架构认识

1，MVC和MVVM的区别和特点

​ MVC模式 ：

Model： 数据模型，一些JavaScript 对象，比如 {name : “小小强”,age : 16};

View: 视图，网页中的内容，一般由HTML模板生成。

Controller : 控制器（路由），视图和模型之间的胶水。

​ MVVM模式 ：

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

​ View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

ViewModel：它是View和Model的粘合体**，**负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；

对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pRsLBmrP-1583324651945)(E:\self-study\Typora图片\clip_image002.jpg)]

区别：

一、MVC

MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。

如果前端没有框架，只使用原生的html+js，MVC模式可以这样理解。将html看成view;js看成controller，负责处理用户与应用的交互，响应对view的操作（对事件的监听），调用Model对数据进行操作，完成model与view的同步（根据model的改变，通过选择器对view进行操作）;将js的ajax当做Model，也就是数据层，通过ajax从服务器获取数据。

二、MVVM

MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。

这里我们拿典型的MVVM模式的代表，Vue，Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化。

整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提高代码的可重用性。

更加详细请看：

https://www.cnblogs.com/xsg1/p/10535665.html

https://blog.csdn.net/weixin_45127981/article/details/90698794

2，vue中mvvm的架构认识

  <!-- view   视图 -- V -->
    <div id="app">
        <p>
            {{ msg }}
        </p>
        <input type="text" v-model="msg">
    </div>

    <script>

        // model 数据模型  ----  M
        let model = {
                msg: '认识MVVM111'
            }


        // view model 视图模型对象 ---- VM
        new Vue({
            el: '#app',
            data: model
        })

Vue是一款开源的JavaScript MV*（MVVM、MVC）框架。

 Vue **引入了MVVM (Model-View-ViewModel)****模式，他不同于MVC架构