【avalonia教程】17mvvm简介、command

Happy coder2025-10-28 10:10

好，我们到这里已经演示了下mvvm的基础用法了，现在该简单的介绍下了mvvm的概念了。

mvvm，实际上是Model-View-ViewModel的简称，这三个部分的作用如下：

Model: 数据模型层，负责处理业务逻辑和数据
View: 视图层，负责用户界面展示，在您提供的代码中对应 MainWindow
ViewModel: 视图模型层，作为View和Model之间的桥梁，处理UI逻辑

简单的说，就是Model负责存储相关数据、处理业务逻辑，View负责将数据展示出来，ViewModel则是两者的中间层，负责实现数据互通。

这么做有以下好处：

数据绑定: View和ViewModel之间通过数据绑定实现自动同步
命令绑定: UI操作通过命令绑定到ViewModel中的方法
分离关注点: 将UI逻辑与业务逻辑分离，提高代码可维护性
可测试性: ViewModel不依赖具体UI，便于单元测试

有小伙伴可以有疑问了：View这里是指TextBox控件的Text属性我可以理解，ViewModel指的是MainWindowViewModel我可以理解，但是我没有看到Model呢？实际上啊，这里是把ViewModel和Model集成到一起了。这也是很多mvvm框架的常见方式，比如vue。

学完mvvm这种模式后，我们再回过头来看之前的那张图，是不是就容易理解了：

最后我们再说下Command模式。之前我们定义Button的点击操作，是在Click里面去做的。也可以用Command的形式去做，代码如下：

xml 复制代码

<Button Command="{Binding AddItem}">add</Button>

c# 复制代码

public partial class MainWindowViewModel: ObservableObject
{
    [ObservableProperty]
    private string? _pageDesc = "abcd";
    
    [RelayCommand]
    public void AddItem()
    {
        PageDesc += 'a';
    }
}

这里先解答大家可能会有的两个疑问：

为什么用command和click的效果看着是一样的？

通过查看源码发现，Click中调用了Command方法
既然两者一样，那我为什么不用click而要用command，click看着还更简单诶

个人关于这块的理解是：有时候一个窗口或控件，会绑定不同的DataContext，如果用click，还需要对DataContext的类型做判断后，采用不同的逻辑