Vue 前端笔记 | MVVM、MVC 关系与区别_为什么angular是mvc vue是mvvm

作者：Gausst松鼠会 | 2024-04-06 21:28:04

踩

为什么angular是mvc vue是mvvm

1. 后端中的 MVC 与前端中的 MVVM 之间的区别

MVC(模型-视图-控制器) 是后端的分层开发概念，分为 model（模型）、view（试图）、controller（控制器）。

M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。

MVVM (模型-视图-视图模型) 前端视图层的概念，主要关注于视图层的分离，把前端的视图层分为了三部分 Model、View、VM ViewModel.

【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。

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

MVC,MVP,MVVM是三种常见的前端架构模式(Architectural Pattern),它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法，一种架构模式往往能使用多种设计模式。

MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view相同，不同的是MV之间的纽带部分。

2. 为什么会有MVVM框架？

在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。

比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。

前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定，极大了提高了开发效率。

3. MVVM的演变由来

第一阶段，直接用JavaScript操作DOM节点，使用浏览器提供的原生API：
第二阶段，由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心：
第三阶段，MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。
现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，想要写出Gmail这样的页面，仅仅用jQuery是远远不够的。MVVM模型应运而生。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

4. MVVM 与 vue基本代码对应关系


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基础代码</title>
 
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- vue 实例所控制的元素区，就是对应MVVM 的 v-->
<div id="app">
    <p>{{msg}}</p>
</div>
 
<script>
    // new 出来的 vm 对象，就是 MVVM 中的 VM 调度者
    new Vue({
        el: '#app', // 表示当前vue实例,要控制页面上的那个区域。
        // 这里 data 对应 mvvm 中的 m ，专门用来保存每个页面的数据
        data: { // 存放的是 el 中要用到的数据
            msg: 'hello vue'
        }
    });
</script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/374441

Vue 前端笔记 | MVVM、MVC 关系与区别_为什么angular是mvc vue是mvvm

1. 后端 中的 MVC 与 前端中的 MVVM 之间的区别

2. 为什么会有MVVM框架？

3. MVVM的演变由来

4. MVVM 与 vue基本代码对应关系

1. 后端中的 MVC 与前端中的 MVVM 之间的区别