MVVM架构模式简介

最新推荐文章于 2024-02-07 15:31:22 发布

weixin_31188147

最新推荐文章于 2024-02-07 15:31:22 发布

阅读量1.1k

点赞数 21

文章标签：架构

本文链接：https://blog.csdn.net/weixin_31188147/article/details/135341867

版权

什么是MVVM？

MVVM（Model-View-ViewModel）是一种设计架构模式，旨在分离用户界面（UI）的开发工作中的业务逻辑与UI表示层。这种分离是为了简化组件之间的交互，并提高代码的可管理性和可测试性。

MVVM的核心组件

MVVM包含三个核心组件：

Model（模型）：代表应用程序的数据结构和业务逻辑。它负责存取数据、数据验证、业务规则等。模型是独立于UI的，它不包含任何关于如何显示数据的信息。
View（视图）：是用户看到并与之交互的界面。视图是应用程序的UI部分，它由各种UI元素如按钮、文本框、图片等组成。在MVVM架构中，视图负责定义结构、布局和外观，但它不处理任何业务逻辑。
ViewModel（视图模型）：是模型与视图之间的中介。ViewModel通过命令（Commands）和数据绑定（Data Binding）将模型信息传递到视图，并处理用户的输入。因此，ViewModel响应用户的行为，调用模型中的数据处理方法，并更新模型，同时保持视图和模型的同步。

数据绑定通常是双向的：ViewModel的改变即时反映在View上，同时用户在View的操作也能实时地更新到ViewModel。这个过程大多是自动的，大大简化了传统的UI事件处理流程。

MVVM的好处是提高了UI的可复用性和可测试性，它使得UI设计者能夏季独立于开发者设计视图，开发者能专注于业务逻辑和数据模型的开发。受欢迎的MVVM框架有Microsoft的WPF中的原生支持，以及前端框架如Vue.js、Angular等。

场景示例：用户登录

设想一个简单的“用户登录”界面，用户需要输入用户名和密码，然后点击登录按钮。在这个示例中，我们将展示如何使用MVVM模式来构建该功能。

Model（模型）

User：包含属性username和password，对应于用户的登录信息。
AuthenticationService：业务逻辑层，含有login函数，用于验证用户输入的用户名和密码。

View（视图）

登录页面的HTML结构，包含两个输入框（分别用于用户名和密码）和一个登录按钮。

ViewModel（视图模型）

LoginViewModel：包含用于数据绑定的属性username和password，以及一个loginCommand。
loginCommand会调用AuthenticationService中的login方法，并根据登录成功或失败更新页面状态。

MVVM实现示例过程

用户在登录表单的用户名和密码输入框内输入数据。
这些输入框是通过数据绑定与LoginViewModel中的username和password属性绑定的。
用户点击登录按钮，这时触发了LoginViewModel中的loginCommand。
loginCommand调用AuthenticationService的login函数，并将username和password传递给它。
AuthenticationService处理登录逻辑，验证用户凭据。
登录结果返回给LoginViewModel，它相应地更新视图状态（比如显示登录成功或错误信息）。

如果成功，LoginViewModel可能会告诉用户导航到主界面。

如果失败，LoginViewModel可能会更新一个错误消息的绑定属性，该消息随后会在视图上显示。

在Vue.js中的代码示例：

// 设想有以下简化的HTML模板
<template>
  <div>
    <input v-model="username" placeholder="Enter your username">
    <input v-model="password" type="password" placeholder="Enter your password">
    <button @click="login">Login</button>
    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    login() {
      AuthenticationService.login(this.username, this.password)
        .then(() => {
          // Handle successful login, e.g. navigate to home page
          this.$router.push('/home');
        })
        .catch(() => {
          // Handle login error
          this.errorMessage = 'Invalid username or password.';
        });
    }
  }
}
</script>