前端框架MVVM是什么（整理）

最新推荐文章于 2025-03-17 17:33:08 发布

weixin_34352449

最新推荐文章于 2025-03-17 17:33:08 发布

阅读量1w

点赞数 10

文章标签：前端框架前端 ui ViewUI

本文整理了前端框架MVVM的核心概念，强调其通过接口实现前后端数据分离，提高开发效率。MVVM模式中，ViewModel作为视图模型层，负责与Model交互，实现数据双向绑定，从而解耦View和Model，简化前端开发。Vue.js等框架应用MVVM，促进GUI开发与后端业务逻辑的分离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端框架MVVM是什么（整理）

一、总结

一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。

1、我大前端应该不应该做复杂的数据处理的工作？

不应该

只要后端保证对外接口足够简单就行了，我请求api，你把数据返出来，咱俩就这点关系，其他都扯淡。

后端：我们这里的业务逻辑和数据处理会非常复杂！
前端：关我屁事！

后端业务处理再复杂跟我们前端也没有半毛钱关系，只要后端保证对外接口足够简单就行了，我请求api，你把数据返出来，咱俩就这点关系，其他都扯淡。

所以我这边开发也是同样的，前端就负责请求api就好，别的都不需要。

2、mvc和mvvm的关系？

改进版

数据分离

视图模型层

c（控制层）被换成了vm（viewmodel）层

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）

3、MVVM框架编码实例？

扯了这么多，并没有什么卵用。千言万语不如一个栗子来的干脆，下面用一个 Vue 实例来说明 MVVM 的具体表现。

Vue 的 View 模板：

<div id="app">
    <p>{
    {message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

Vue 的 ViewModel 层（下面是伪代码）：

var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（完全前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;

        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，做二次封装
                vm.server = res;
            }
        });
    }
})

服务端的 Model 层（省略业务逻辑处理，只描述对外接口）：

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

这就是完整的 MVVM 编程模式。

4、前端框架MVVM出现的最大意义是什么？

开发效率

前后端业务逻辑分离

接口

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。

MVVM用接口实现了前后端数据的通信，这样可以使前后端之间的业务逻辑没有什么关系。

MVVM在感觉上要比mvc模式前后端要分的更开

5、应用MVVM框架的vue.js框架的最主要作用是什么？

双向数据绑定

前端數據的統一

前端數據的統一：前端应用相同数据的位置实现了数据的统一
双向数据绑定：綁定后vue好dom數據保持統一，一動全動，是前端的

双向数据绑定中的两向分别为 view和viewmodel。

6、前端框架MVVM中的vm层是干嘛的？

状态行为

DOM操作

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。看到了吧，View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

View一般就是我们平常说的HTML文本的Js模板，里面可以嵌入一些js模板的代码，比如Mustache，比如jstl类似的模板伪代码

ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑，举个例子，比如图片走马灯特效，比如表单按钮点击提交，这些自定义事件的注册和处理逻辑都写在ViewModule里面了

Module就更简单了，就是对于纯数据的处理，比如增删改查，与后台CGI做交互

7、MVVM最主要的特征是什么？

前后端分离

前后端分手大师——MVVM 模式

或者说前后端更好的分离（接口来实现前后端的通信）

二、MVVM百度百科

MVVM是 Model-View-ViewModel的简写。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、 3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。 MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）