VUE与MVVM关系

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 实现原理

  1. 数据劫持
    Vue.js的实现方式,对数据(Model)进行劫持,当数据变动时,数据会出发劫持时绑定的方法,对视图进行更新。

  2. 执行步骤:解析模版 -->解析数据–>绑定模版与数据

  • 对应代码: 详细说明
    在这里插入图片描述
    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中,统一方法方面我们调取。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值