素材巴巴 > 程序开发 >

Vue中的MVVM模型

程序开发 2023-09-04 09:09:27

MVVM模型学习

文章目录

一、什么是MVVM模型?

Vue的设计受到了MVVM模型的启发,在文档中使用vm(view model)来表示vue的实例,那么,问题来了什么是MVVM模型呢?

MVVM从字面意思来理解就是划分为 View 、model 、 VIewModel 三个部分,分别表达了View(视图)、Model(数据)、ViewModel(负责两者之间的数据处理操作)。这就类似于Mvc框架中的Model层、View层、congtroller层,MVVM的本质就是MVC的升级版,更好的应用于前端开发。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

二、MVVM模型图解

View:也就是视图,字面意思就是直观的讲就是讲页面呈现给数据
Model:相当于数据层,数据就是即将在view层展示的。
ModelView:类似于中间件的用法,主要用于Model和View之间的桥梁,通过数据的双向绑定即可将两者之间的联系起来
,并且保证数据视图的一致性。

在这里插入图片描述
值得一提的是在MVVM模型中,Model层和View层两者之间是不能直接进行联系,必须通过ViewModel这个桥梁来进行通信,主要表现在以下三个方面:

1. ViewModel层通过观察数据层的变化,并对视图对应的内容进行实时更新。
2. ViewModel层通过监听视图层的变化,并能够通知数据发生相应变化。
3. ViewModel 层:把 View 需要的层数据暴露,并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责,也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化,View 层会得到更新;而当 View 中声明了数据的双向绑定(通常是表单元素),框架也会监听 View 层(表单)值的变化。一旦值变化,View 层绑定的 ViewModel 中的数据也会得到自动更新。

在这里插入图片描述

三、MVVM模型的特点

MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点

  1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
  3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。
  4. 可测试。界面素来是比较难于测试的,测试可以针对ViewModel来写

总结

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

MVVM模型对于前端开发来说,特别重要,是一个必须需要掌握的知识点!敲重点!!!所以在学习vue的过程中也要很好的掌握这些基础概念。冲鸭kk!

本文资料参考自:
深入MVVM模型学习
MVVM模型学习
MVVM是什么?
MVVM简介说明


标签:

上一篇: 取消订阅RxJs Observable 的方案 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。