VUE与MVVM关系

最新推荐文章于 2025-05-11 21:25:46 发布

@Herry

最新推荐文章于 2025-05-11 21:25:46 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Vue

本文链接：https://blog.youkuaiyun.com/aimin_com/article/details/103454037

Vue 专栏收录该内容

14 篇文章

订阅专栏

VUE

一款用于构建用户界面的渐进式js框架，vue被设计为自底向上逐层应用，它的核心库只关注图层，方便与第三方库或者已有项目整合。vue.js的核心是一个允许采用简洁的模板语法来声明式将数据渲染进DOM (DocumentObjectModel)的系统，vue特性之一是响应式原理。

MVVM

在这里插入图片描述

1. 概念：实质是MVC的改进版，将之前的Model-View-Controller 变换到现在的Model-View-ViewModel，外观是将controller变为ViewModel，但是实质里面对应的关系发生了变化，其核心是提供对view和ViewModel的双向数据绑定（v-model），

2. mvvm 组成：来自维基百科

1) 模型
模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（英语：data access layer）（以数据为中心）。

2) 视图
就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。

3) 视图模型
视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器（英语：Data binding）之间进行通信。

4) 绑定器
声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆（英语：solution stack）中，绑定器是一种名为XAML的标记语言。

3. mvvm 实现原理

数据劫持
Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新。
执行步骤：解析模版 -->解析数据–>绑定模版与数据

对应代码：详细说明

4. 对应代码详解：
model：在当前vue中我们使用的model 只负责数据（data,porps)，也就是DTO一个贫血的Model数据，也可以再model中定义数据修改和操作的业务，但是我们和外界数据交互动统一接口到了vm中，代码体现在data和props。
View：页面UI布局，负责将数据模型转化为UI展示，实质为tempelate和style。
ViewModel：同步view和model对象，使得view和model间没有直接联系，vm通过双向绑定将view和model连接起来实现自动同步，对应代码中的methods
v-model等：其实这种绑定的机制是由vue自己封装的，也就是通过js封装，但是这种机制是从view视图演变过来的（看下面的mvc-mvvm过程），所以v-model虽然不是html的属性但是也是属于view的，view通过view向vm传递消息，因为我们看不到v-model的逻辑，所以不属于vm的部分，他是一个向外传递的一个接口。

在这里插入图片描述

MVVM演进过程：mvc–>mvp–>mvvm

在这里插入图片描述

**↓**

在这里插入图片描述

**↓**

在这里插入图片描述

前后端交互

在这里插入图片描述

mvvm中model是否可以对外接口

其实我们可以将前端对后端的接口调用放到我们的model的data里面，但是有一个问题，data里面的return目的是为了方面我们用很多的子组件，他们之间的传值使用解除耦合关系，这样每次使用data时候返回整组数据，其实在我们的生命周期和data都是我们的函数，我们只是将方法写到了methods中，统一方法方面我们调取。