移动应用架构设计：MVVM 实战教程

一、开篇：什么是 MVVM？它有什么用？

在开发一款手机应用（无论是 Android 还是 iOS）时，我们不仅要写能实现功能的代码，还要考虑如何让代码结构清晰、容易维护。这就涉及到“架构设计”的问题。

MVVM 是 Mobile Application Architecture 中的一种常见模式，全称是 Model-View-ViewModel，中文翻译是 “模型-视图-视图模型”。它是专门为像 Android 这样的移动平台设计的，可以帮助开发者把界面展示逻辑和数据处理逻辑分开，使代码更整洁、更容易扩展。

MVVM 的三大核心角色：

角色	职责	示例
Model（模型）	处理数据和业务逻辑，比如从网络获取信息、保存到数据库等	用户账号、天气数据
View（视图）	负责显示 UI 界面，也就是用户看到的部分，例如按钮、文字框等	XML 布局文件
ViewModel（视图模型）	桥梁角色，负责将 Model 的数据传递给 View，并接收用户的交互事件	一个 Java/Kotlin 类

简单来说，你可以想象这个过程就像你点外卖：

• Model：后厨，负责准备食材和做菜；
• ViewModel：服务员，告诉你什么时候可以吃，并通知厨师要做什么菜；
• View：餐桌和餐具，你在这里享用美食。

接下来，我们就一步一步来学习 MVVM 架构的实际应用吧！

---

二、环境准备：搭建你的开发环境

本教程使用 Android Studio 来演示，适合完全零基础的新手。如果你之前没有安装 Android Studio，请按照以下步骤操作。

步骤 1：安装 Android Studio

1. 访问官网 https://developer.android.com/studio
2. 根据你的操作系统下载安装包（Windows/macOS/Linux）
3. 安装完成后打开 Android Studio

⚠️ 提示：建议选择稳定版（Stable）版本，新手不建议尝试 Beta 或 Canary 版本。

步骤 2：创建新项目

1. 点击 "Start a new Android Studio project"
2. 选择 "Empty Activity"（空项目模板）
3. 输入项目名（比如 MyFirstMVVMApp）
4. 编程语言选择 Kotlin（比 Java 更现代，更适合新手）
5. 其他设置保持默认，点击 Finish

等待项目加载完成之后，你会看到两个主要的文件夹：

• app/src/main/java/...：这是放 Java/Kotlin 代码的地方
• app/src/main/res/layout/...：这是放布局文件（XML）的地方

步骤 3：引入必要的依赖库

为了更好地实践 MVVM，我们将使用 Jetpack 组件中的 ViewModel 和 LiveData。我们需要在 build.gradle (Module: app) 文件中添加如下依赖：

dependencies {
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.6.2'
    implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.6.2'
}

然后点击右上角的 Sync Now 同步项目。

---

三、核心概念讲解：理解 MVVM 的三个部分

我们现在开始学习 MVVM 的三个组成部分：Model、ViewModel、View。每个部分我们都将结合实际代码进行解释。

3.1 Model 层：数据的管理者

Model 是 MVVM 结构中最底层的一部分，它负责处理数据相关的事情。例如，从网络下载数据、访问本地数据库或者做一些计算。

示例：模拟一个简单的用户信息 Model

我们先创建一个 Kotlin 数据类表示用户信息：

// app/src/main/java/com/example/myfirstmvvmapp/User.kt

data class User(val name: String, val email: String)

再创建一个 Model 类来模拟获取用户信息的过程：

// app/src/main/java/com/example/myfirstmvvmapp/UserRepository.kt

class UserRepository {
    fun getUser(): User {
        // 模拟从网络或数据库获取用户信息
        return User("张三", "zhangsan@example.com")
    }
}

✅ 总结 Model 的作用：

• 存储和管理数据
• 提供与外界通信的接口（如从服务器获取数据）

---

3.2 ViewModel 层：连接 Model 和 View 的桥梁

ViewModel 是 MVVM 的核心，它承担着数据与界面之间的桥梁作用。它可以持有 Model 的数据，并将其提供给 View 使用，同时还能响应用户的操作。

创建一个简单的 ViewModel

// app/src/main/java/com/example/myfirstmvvmapp/UserViewModel.kt

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class UserViewModel : ViewModel() {

    private val repository = UserRepository()
    private val _user = MutableLiveData<User>()

    val user: LiveData<User>
        get() = _user

    fun loadUser() {
        // 模拟异步加载数据
        _user.value = repository.getUser()
    }
}

这里用到了两个 Jetpack 组件：

• MutableLiveData：用于可变数据，ViewModel 可以修改它。
• LiveData：不可直接修改，供 View 监听使用，避免直接暴露内部状态。

---

3.3 View 层：用户看到的部分

在 Android 中，View 主要是通过 XML 文件定义的界面。我们要在 activity_main.xml 中添加两个 TextView 来显示用户信息。

<!-- res/layout/activity_main.xml -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name: "
        android:textSize="20sp" />


![移动设备适配-2](https://code-guide.oss.shanghai.autogptai.club/common/file/download?name=date2025061408/6ba20d66-b0cb-412e-8ef4-8570de0c57ea.jpg)


    <TextView
        android:id="@+id/tv_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Email: "
        android:textSize="20sp" />

</LinearLayout>

接下来，在 MainActivity.kt 中绑定 ViewModel 和 View：

// app/src/main/java/com/example/myfirstmvvmapp/MainActivity.kt

import android.os.Bundle
import androidx.activity.viewModels
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Observer

class MainActivity : AppCompatActivity() {

    private val viewModel: UserViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvName = findViewById<TextView>(R.id.tv_name)
        val tvEmail = findViewById<TextView>(R.id.tv_email)

        // 加载用户信息
        viewModel.loadUser()

        // 观察数据变化并更新UI
        viewModel.user.observe(this, Observer { user ->
            tvName.text = "Name: ${user.name}"
            tvEmail.text = "Email: ${user.email}"
        })
    }
}

---

四、实战项目：做一个带输入功能的 MVVM 应用

现在我们要实现一个更完整的例子：用户输入名字后，页面显示欢迎语句。

功能要求：

1. 页面有一个输入框 EditText
2. 一个按钮 “Submit”
3. 点击按钮后，在下方显示欢迎语：“Hello, 张三！”

---

4.1 Model 层

我们不需要改动 Model，因为只是改了展示方式，不涉及真实数据逻辑。

---

4.2 ViewModel 层

新增一个欢迎语相关的逻辑：

class WelcomeViewModel : ViewModel() {
    private val _greeting = MutableLiveData<String>()
    val greeting: LiveData<String> = _greeting

    fun generateGreeting(name: String) {
        _greeting.value = "Hello, $name!"
    }
}

---

4.3 View 层

修改 XML：

<LinearLayout ... >

    <EditText
        android:id="@+id/edit_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入你的名字"/>

    <Button
        android:id="@+id/btn_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"/>

    <TextView
        android:id="@+id/tv_greeting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:textSize="20sp"/>


![应用性能监控-1](https://code-guide.oss.shanghai.autogptai.club/common/file/download?name=date2025061408/c2766b02-4723-487b-a0ff-3e88792de6de.jpg)


</LinearLayout>

对应的 MainActivity 更新为：

private val welcomeViewModel: WelcomeViewModel by viewModels()

val editName = findViewById<EditText>(R.id.edit_name)
val btnSubmit = findViewById<Button>(R.id.btn_submit)
val tvGreeting = findViewById<TextView>(R.id.tv_greeting)

btnSubmit.setOnClickListener {
    val name = editName.text.toString()
    welcomeViewModel.generateGreeting(name)
}

welcomeViewModel.greeting.observe(this, Observer { greeting ->
    tvGreeting.text = greeting
})

---

✅ 总结实战要点：

• 所有数据操作都要放在 ViewModel 中
• View 不要直接处理数据逻辑，只负责显示和交互
• LiveData 让 View 自动更新，无需手动刷新

---

五、常见问题解答（FAQ）

Q1：MVVM 和 MVC 有什么区别？

• MVC 是早期的架构模式，View 和 Controller 都可能包含大量业务逻辑，耦合度高。
• MVVM 使用 ViewModel 解耦 View 和 Model，提高了可测试性和维护性。

Q2：为什么用 LiveData 而不是普通变量？

• LiveData 是生命周期感知型组件，不会造成内存泄漏。
• 当界面不可见时，它会自动停止观察，避免崩溃或浪费资源。

Q3：ViewModel 放在哪？能不能在多个 Activity 中共享？

• ViewModel 是按 Activity 或 Fragment 生命周期创建的。
• 如果想共享数据，可以使用 SharedViewModel，后面我们会专门讲这部分。

---

六、下一步学习建议

恭喜你完成了第一个 MVVM 项目！接下来你可以继续学习以下几个方向：

1. ViewModel + Repository + Room Database：学习如何使用本地数据库持久化数据
2. 协程（Coroutine）和 Retrofit：让网络请求更高效
3. 双向绑定（Binding）：使用 DataBinding 简化 View 和 ViewModel 的绑定过程
4. Navigation Component：学习 Jetpack 提供的导航组件，简化页面跳转
5. 单元测试：为你的 ViewModel 写测试用例，提高代码质量

---

七、小结

在这篇文章中，我们从零开始了解了 MVVM 架构的基本概念，并一步步用 Android + Kotlin 完成了一个小型应用。虽然看起来有点复杂，但只要记住这三句话就很简单：

• Model：管好数据。
• ViewModel：沟通数据和界面。
• View：只负责显示和交互。

坚持练习，你很快就能写出结构清晰、易于维护的高质量 App 代码啦！

如果你觉得本文对你有帮助，请点赞分享给更多刚入门的朋友 ❤️