Vue的架构模式

本文介绍了前端框架Vue.js及其采用的MVVM架构模式,对比了MVC和MVP模式。Vue.js结合了Angular和React的优点,提供高性能的数据绑定。在MVC中,模型、视图和控制器各司其职,实现分层解耦。MVP模式中, Presenter作为View和Model的桥梁,实现双向通信。MVVM模式下,ViewModel通过双向绑定自动同步View和Model的状态。

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

前端框架

  • angular
    MVC模式,双向数据绑定,依赖注入
  • react
    virtual DOM(虚拟DOM,即与DOM一样的对象,操作对象避免DOM的直接操作从而提高性能),性能上辗轧angular
  • vue
    结合angular和react的优点,MVVM模式,高性能高效率框架

架构模式

MVC模式

  • M: Model (数据) => 数据保存
    Model(模型)表示应用程序核心(比如数据库记录列表)。
    Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
    通常模型对象负责在数据库中存取数据。
  • V: View (视图) => 用户界面
    View(视图)显示数据(数据库记录)。
    View(视图)是应用程序中处理数据显示的部分。
    通常视图是依据模型数据创建的。
  • C: Controller (控制器) => 业务逻辑
    Controller(控制器)处理输入(写入数据库记录)。
    Controller(控制器)是应用程序中处理用户交互的部分。
    通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。

在这里插入图片描述

MVC 分层有助于管理复杂的应用程序,因为您可以在一个时间内专门关注一个方面。例如,您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。

MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。

MVC是一个框架模式,它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件:模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP + servlet + javabean的模式。


MVP

MVP是模型(Model)、视图(View)、主持人(Presenter)的缩写,分别代表项目中3个不同的模块。

  • 模型(Model):
    负责处理数据的加载或者存储,比如从网络或本地数据库获取数据等;
  • 视图(View):
    负责界面数据的展示,与用户进行交互;
  • 主持人(Presenter):
    相当于协调者,是模型与视图之间的桥梁,将模型与视图分离开来。
    在这里插入图片描述
    View与Model并不直接交互,而是使用Presenter作为View与Model之间的桥梁。其中Presenter中同时持有View层以及Model层的Interface的引用,而View层持有Presenter层Interface的引用。当View层某个界面需要展示某些数据的时候,首先会调用Presenter层的某个接口,然后Presenter层会调用Model层请求数据,当Model层数据加载成功之后会调用Presenter层的回调方法通知Presenter层数据加载完毕,最后Presenter层再调用View层的接口将加载后的数据展示给用户。这就是MVP模式的整个核心过程。

MVVM

MVVM架构模式是MVP的演变

  • Model
  • View
  • ViewModel类似于MVP中的Presenter,唯一区别是它为双向绑定,View的变动自动反映在ViewModel,反之亦然。

在这里插入图片描述
核心:关注Model的变化,让MVVM框架利用自己的机制去更新DOM,让开发者从操作DOM的繁琐解脱。

不管是哪个,让Model和View不能直接通信是非常关键的限制。让Model和View直接通信在系统变得复杂时会成为灾难,Model和View直接耦合,会使得系统失控。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值