MVVM思想,和MVC的区别,以及MVVM框架与VUE代码的对应关系

MVVM

定义: MVVM是 Model-View-ViewModel 的简写,即模型-视图-视图模型

模型(Model): 指的是后端传递的数据。

视图(View): 指的是所看到的页面。

视图模型(ViewModel): mvvm模式的核心,它是连接view和model的桥梁。它有两个方向(实现的方式为DOM事件监听):

   1. 将model转换成view(将后台传递的数据转化成用户所看到的页面)
   2. 将view转换为model(将所看都的页面转换)

重点:当这两个方向同时实现我们称之为数据的双向绑定。

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

MVC(后台用的多)

定义: MVC是Model-View-Controller的简写,即模型-视图-控制器MV的意思和MVVM中的MV意思一样,C指的是页面的业务逻辑。

  使用MVC的目的就是将MV 的代码分离,MVC是单向通信,也就是View和Model,必须通过Controller来承上启下。

MVVM和MVC的区别

  MVVM和MVC的区别并不是VM完全取代了C,ViewModel存在的目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其他视图操作还是应该放在Controller中实现,也就是说MVVM实现的是业务逻辑组件的重用。
  由于MVC出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。

MVVM框架与VUE代码的对应关系

注意: 这里方便大家看,我直接引用vue.js,大家可以复制代码进行演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  	<!-- 1.导入Vue包 -->
    <!-- 只要 导入了Vue包 在window 全局就多了Vue 构造函数-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.在页面中放一个容器,将来在这个容器中所有的HTML代码都会被Vue控制 -->
    <!--将来要被new 出来的Vue 实例控制的div区域,就是MVVM中的View  -->
    <div id="app">
        <p>{{msg}}</p>
    </div>

    <script>
        // 3.创建Vue的实例
        // const vn = new Vue({配置对象})
        // 这里,new Vue()得到的vm对象,就是MVVM中的VM,我们把它叫做调度者(监控者)

        const vm = new Vue({
            el:'#app',//element 的缩写,el用于指定当前的vm实例 要控制页面上的哪个区域
            data:{//表示页面上要渲染的数据
                // 在new Vue 的时候,提供的配置对象中,data属性指向的对象,就是MVVM中的Model
                msg:'Hello XiaoMeiZi!'

            }
        })
    
    </script>
</body>
</html>

你可能感兴趣的:(Vue总结)