一、简介

1、定义

MVVM 模式（Model--View--ViewModel 模式）

Model：模型层，负责处理数据的加载或存储。与MVP中的M一样。
View：视图层，对应于Activity，XML,View，负责界面数据的展示，与用户进行交互。与MVP中的V一样。
ViewModel：视图模型，负责完成View于Model间的绑定和交互,Model或者View更改时，实时刷新对方，负责业务逻辑。

2、详情

和 MVP 模式相比，MVVM 模式用ViewModel 替换了 Presenter ，其他层基本上与 MVP 模式一致，ViewModel 可以理解成是 View 的数据模型和 Presenter 的合体。

MVVM 采用双向绑定（data-binding）：View 的变动，自动反映在 ViewModel，反之亦然，
这种模式实际上是框架替应用开发者做了一些工作（相当于 ViewModel 类是由库帮我们生
成的），开发者只需要较少的代码就能实现比较复杂的交互。

3、各模块关系

MVVM 的调用关系和 MVP 一样。但是，在 ViewModel 当中会有一个叫 Binder，或者是Data-binding engine 的东西。以前全部由 Presenter 负责的 View 和 Model 之间数据同步操作交由给 Binder 处理。你只需要在 View 的模版语法当中，指令式地声明 View 上的显示的内容是和 Model 的哪一块数据绑定的。当 ViewModel 对进行 Model 更新的时候，Binder会自动把数据更新到 View 上去，当用户对 View 进行操作（例如表单输入），Binder 也会自动把数据更新到 Model 上去。这种方式称为：Two-way data-binding，双向数据绑定。可以简单而不恰当地理解为一个模版引擎，但是会根据数据变更实时渲染。

二、MVVM案例

此案例基于MVP的案例,改为MVVM模式。其中ViewModel会跟View进行绑定，这里会用到Android的 Data Binding，关于DataBinding可以参考此文

首先在需要用到DataBinding模块的build.gradle中添加以下两句配置（kotlin需要加第一句，Java不需要）

image.png

Model层

data class UserModel(var userName:String){

    fun login(result: Int, listener: ModelCallBack){
        if (result == 1){
            listener.onSuccess("${userName}登录成功")
        }else{
            listener.onFailed("${userName}登录失败")
        }
    }

    //回调接口
    interface ModelCallBack{
        fun onSuccess(msg:String)
        fun onFailed(msg:String)
    }
}

View层

将根布局修改为layout，加入 Data Binding。
注意：class名为xml名去掉_后的驼峰写法，即此xml为activity_main.xml，则其类名则需要为ActivityMainBinding。两者名字必须是这个规则的写法，否则在View层进行xml绑定时会显示找不到xml文件

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!--class名为xml名去掉_后的驼峰写法-->
    <data class="ActivityMainBinding">
        <variable
            name="userViewModel"
            type="yzl.swu.mvvm.viewModel.UserViewModel" />
    </data>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@={userViewModel.userName}"
            android:textSize="50sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.35" />

        <Button
            android:id="@+id/loginBtn"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_marginTop="30dp"
            android:text="登录"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            android:onClick="@{userViewModel.loginUser}"/>
    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

build一下生成需要的类

再到MainActivity中进行View和ViewModel的绑定

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        //DataBindingUtil.setContentView()方法返回一个数据绑定对象，其命名规则由系统自动生成
        DataBindingUtil.setContentView<ActivityMainBinding>(this,R.layout.activity_main).apply {
            //将View和Model进行绑定
            val userModel = UserViewModel()
            userViewModel = userModel
        }

    }
}

ViewModel层

ViewModel负责业务逻辑处理，并且数据有更新直接通知View去更改。

class UserViewModel: BaseObservable() {
    lateinit var userModel:UserModel
    var userName:String? = null
    //该注解用于双向绑定，需要与 notifyPropertyChanged()方法结合使用
    //该注解用于标记实体类中的get方法或“is”开头的方法,且实体类必须继承BaseObservable
    //使用@Bindable注解标记的get方法，在编译时，会在BR类中生成对应的字段，然后与notifyPropertyChanged()方法配合使用，当该字段中的数据被修改时，dataBinding会自动刷新对应view的数据
        @Bindable
        get() {
            if (field != null) return field
            return null
        }
        set(value) {
            field = value
            //更新UI
            notifyPropertyChanged(BR.userName)
        }



    fun loginUser(view:View){
        userModel = UserModel("用户${(0..9).random()}")
        //点击事件的处理 直接交给Model层
        userModel.login((0..1).random(),object:UserModel.ModelCallBack{
            override fun onSuccess(msg: String) {
                userName = msg
            }

            override fun onFailed(msg: String) {
                userName = msg
            }

        })
    }
}

运行结果

mvvm-gif.gif

三、总结

MVP和MVVM的区别

ViewModel与View绑定后，ViewModel与View其中一方的数据更新都能立即通知到对方，Presenter需要通过接口去通知View进行更新。

关键点

MVVM 把 View 和 Model 的同步逻辑自动化了。以前 Presenter 负责的 View 和 Model 同步不再手动地进行操作，而是交由框架所提供的 Binder 进行负责。
只需要告诉 Binder，View 显示的数据对应的是 Model 哪一部分即可。

MVVM的优缺点

优点

提高可维护性。解决了 MVP 大量的手动 View 和 Model同步的问题，提供双向绑定机制。提高了代码的可维护性。
简化测试。因为同步逻辑是交由 Binder 做的，View 跟着 Model 同时变更，所以只需要保证 Model 的正确性，View就正确。大大减少了对 View 同步更新的测试。

缺点

过于简单的图形界面不适用，或说牛刀杀鸡。
对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高。
数据绑定的声明是指令式地写在 View 的模版当中的，这些内容是没办法去打断点 debug 的。

结语

可以看到，从 MVC->MVP->MVVM，就像一个打怪升级的过程。后者解决了前者遗留的问题，把前者的缺点优化成了优点。同样的 Demo 功能，代码从最开始的一堆文件，优化成了最后只需要 20 几行代码就完成。
但也不是说MVVM一定比其他两种模式要好，在实际中因根据各模式的优缺点及需求选择。

Android框架设计之MVVM