MVC-MVVM简单理解

借鉴什么是MVVM，MVC和MVVM的区别，MVVM框架VUE实现原理

MVC

MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。它是用一种业务逻辑、数据与界面显示分离的方法来组织代码，将众多的业务逻辑聚集到一个部件里面，在需要改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑，达到减少编码的时间。

• Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
• View（视图） - 视图代表模型包含的数据的可视化。
• Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

用户首先在界面中进行人机交互，然后请求发送到控制器，控制器根据请求类型和请求的指令发送到相应的模型，模型可以与数据库进行交互，进行增删改查操作，完成之后，根据业务的逻辑选择相应的视图进行显示，此时用户获得此次交互的反馈信息，用户可以进行下一步交互，如此循环

MVVM

MVVM是Model-View-ViewModel的缩写。即模型-视图-视图模型。

【模型】指的是后端传递的数据。

【视图】指的是所有看到的页面。

【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生改变，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View和ViewModel可以互相通信。

MVVM流程如下：

MVVM.jpg

例：

    <!-- M-V-VM V: view用于显示-->
    <div class="out">
        {{msg}}
    </div>
    <script src="./vue.js"></script>
    <script>
            // M-V-VM VM: ViewModel，用于连接view和model的
        const app = new Vue({
            el:".out",
            // M-V-VM M: model，用于定义和管理数据
            data:{
                msg:'sss',//可以通过任何地方获取或者修改这个数据，app.$data.msg  简写app.msg
            }
        });
        
    </script>