本文最后更新于76 天前，其中的信息可能已经过时，如有错误请发送邮件到2289035571@QQ.COM

mvvm

MVVM是model-view-modelview的简写

MVVM模式的组成部分

模型

模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

视图

就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。

视图模型

视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

绑定器

声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素。

MVVM框架与MVC框架的区别

mvc 和 mvvm 其实区别并不大。都是一种设计思想，主要区别如下：

1.mvc 中 Controller演变成 mvvm 中的 viewModel

2.mvvm 通过数据来驱动视图层的显示而不是节点操作。

3.mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互，而是通过中间桥梁ViewModel来同步

4.mvvm主要解决了:mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

MVVM代码展示

1.前端界面展示，将显示的字段以及命令绑定

前端xaml代码展示：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Content="QQ" FontSize="40" Foreground="White" Background="#BABEF2"/>
    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0"   Text="账号: " FontSize="25" VerticalAlignment="Center" HorizontalAlignment="Right"/>
        <!--Text 绑定字段：UserName-->
        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding UserName}" FontSize="25" VerticalAlignment="Center" Width="200" HorizontalAlignment="Left"/>
        <TextBlock Grid.Row="1" Grid.Column="0" Text="密码: " FontSize="25" VerticalAlignment="Center" HorizontalAlignment="Right"/>
        <!--Text 绑定字段：Password-->
        <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Password}" FontSize="25" VerticalAlignment="Center" Width="200" HorizontalAlignment="Left" />
        <CheckBox Grid.Row="2" Grid.ColumnSpan="2" Content="记住密码" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <!-- 绑定命令：Command  使用命令代替了原本的Button按钮点击事件-->
        <Button Grid.Row="3" Grid.ColumnSpan="2" Content="安全登录" Command="{Binding LoginAction}"  FontSize="32" Foreground="White" Background="Blue"/>
    </Grid>
</Grid>

2.Model数据模型

public class LoginModel
{
    private string _UserName;

    public string UserName
    {
        get { return _UserName; }
        set { _UserName = value; }
    }

    private string _Password;

    public string Password
    {
        get { return _Password; }
        set { _Password = value; }
    }

}

3.命令类，定义命令。替代按钮的点击事件

public class RelayCommand : ICommand
{
    //命令是否能够执行
    readonly Func<bool> _canExecute;
    //命令需要执行的方法
    readonly Action _execute;

    public RelayCommand(Action action, Func<bool> canExecute)
    {
        _execute = action;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        if (_canExecute == null)
        {
            return true;
        }
        return _canExecute();
    }

    public void Execute(object parameter)
    {
        _execute();
    }

    public event EventHandler CanExecuteChanged
    {
        add
        {
            if(_canExecute != null)
            {
                CommandManager.RequerySuggested += value;
            }
        }
        remove
        {
            if(_canExecute != null)
            {
                CommandManager.RequerySuggested -= value;
            }
        }
    }

}

4.定义ViewModel类，此类继承INotifyPropertyChanged

public class LoginVM : INotifyPropertyChanged
{
    public LoginVM()
    {

    }
    LoginModel _loginModel = new LoginModel();

    public string UserName
    {
        get { return _loginModel.UserName; }
        set
        {
            _loginModel.UserName = value;
            RaisePropertyChanged(UserName);
        }
    }

    public string Password
    {
        get { return _loginModel.Password; }
        set
        {
            _loginModel.Password = value;
            RaisePropertyChanged(Password);
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    /// <summary>
    /// 登录方法
    /// </summary>
    void LoginFunc()
    {
        if (UserName == "111" && Password == "222")
        {
            MessageBox.Show("尊敬的用户，您已登录成功");
        }
        else
        {
            MessageBox.Show("登录失败，请重新输入密码");
            UserName = string.Empty;
            Password = string.Empty;
        }
    }

    bool CanLoginExecute()
    {
        return true;
    }

    public ICommand LoginAction
    {
        get
        {
            return new RelayCommand(LoginFunc, CanLoginExecute);
        }

    }
}

5.MainWindow

/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new LoginVM();
    }
}