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

最新推荐文章于 2025-11-11 10:18:01 发布

原创最新推荐文章于 2025-11-11 10:18:01 发布 · 980 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#MVVM思想 #MVVM和MVC的区别 #MVVM与VUE的关系

Vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了MVVM（Model-View-ViewModel）和MVC（Model-View-Controller）两种软件架构模式，详细阐述了两者的定义、核心概念及其实现方式，并通过Vue.js示例代码展示了MVVM的具体应用。

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的简写，即模型-视图-控制器，M和V的意思和MVVM中的M和V意思一样，C指的是页面的业务逻辑。

使用MVC的目的就是将M和V 的代码分离，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>