Vue之MVVM概念详解

￡神魔★判官ぃ 2022-04-04 03:10 509阅读 0赞

免责声明：图片来源于网络，只以传递知识为目的，若有侵权，联系903131009@qq.com即删！

# 一、 什么是MVVM？ #

本来不想写一篇MVVM的文章的，但是在Xamarin的开发中也用到了这个架构，说明还是挺重要的。翻墙在[维基百科][Link 1]里面搜了一下MVVM，请看下段文字，可以作为了解。

> **MVVM**（**Model–view–viewmodel**）是一种软件[架构模式][Link 2]。
> 
> MVVM有助于将[图形用户界面][Link 3]的开发与[业务逻辑][Link 4]或[后端][Link 5]逻辑（*数据模型*）的开发[分离][Link 6]开来，这是通过[置标语言][Link 7]或GUI代码实现的。MVVM的*视图模型*是一个值转换器，[\[1\]][1] 这意味着视图模型负责从模型中暴露（转换）[数据对象][Link 8]，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。[\[1\]][1] 视图模型可以实现[中介者模式][Link 9]，组织对视图所支持的[用例][Link 10]集的后端逻辑的访问。
> 
> MVVM是[马丁·福勒][Link 11]的PM（Presentation Model）设计模式的变体。[\[2\]][2][\[3\]][3] MVVM以相同的方式抽象出视图的状态和行为，[\[3\]][3]但PM以*不*依赖于特定用户界面平台的方式抽象出视图（创建了*视图模型*）。  
> MVVM和PM都来自[MVC][]模式。
> 
> MVVM由[微软][Link 12]架构师Ken Cooper和Ted Peters开发，通过利用[WPF][]（微软[.NET][]图形系统）和[Silverlight][]（WPF的互联网应用派生品）的特性来简化用户界面的[事件驱动程序设计][Link 13]。[\[3\]][3] 微软的WPF和Silverlight架构师之一John Gossman于2005年在他的博客上发表了MVVM。
> 
> MVVM也被称为**model-view-binder**，特别是在不涉及.NET平台的实现中。[ZK][]（Java写的一个[Web应用框架][Web]）和[KnockoutJS][]（一个[JavaScript][][库][Link 14]）使用model-view-binder。

<table> 
 <tbody> 
  <tr> 
   <td style="width:117px;">Model</td> 
   <td style="width:381px;">模型。数据对象（data）。</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">View</td> 
   <td style="width:381px;">视图。模板页面（动态页面，从model取出并显示数据）。</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">ViewModel</td> 
   <td style="width:381px;">视图模型（Vue的实例）。</td> 
  </tr> 
 </tbody> 
</table>

三者关系如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70][]

# 二、 理解Vue的MVVM #

看下面这张MVVM的图，待我慢慢道来。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 1][]

**此图解释：**

View是视图页面，要想显示或更新页面就要通过DOM来显示，但是并不直接去操作DOM。在View里面有两种语法概念是指令和大括号表达式，用来显示数据。

Model简单来说就是数据，这些数据提供给View使用。View在Vue的实例（实例就相当于new的一个对象）支撑下就能够自动去Model拿取数据。

下图中的②就是通过View中的Data Bingdings（数据绑定，也就是Vue的实例）拿数据的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 2][]

上图中的①，View中的数据发生变化时，Model可以通过DOM Listeners（DOM监听器）实时的给View提供数据。这里还是举个栗子吧，就比如说在页面里面有个输入框，当输入数据之后，马上就要数据就会扩大十倍并显示出来，这时Model就是实时提供View需要的数据。

概念的话，可能理解起来不容易，但是在码代码的过程中就可以深深的体会到了！

如果您遇到了什么问题，欢迎留言告诉我~

最后，感谢您的阅读！

[Link 1]: https://zh.wikipedia.org/wiki/MVVM
[Link 2]: https://zh.wikipedia.org/w/index.php?title=%E6%9E%B6%E6%9E%84%E6%A8%A1%E5%BC%8F&action=edit&redlink=1
[Link 3]: https://zh.wikipedia.org/wiki/%E5%9B%BE%E5%BD%A2%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2
[Link 4]: https://zh.wikipedia.org/w/index.php?title=%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91&action=edit&redlink=1
[Link 5]: https://zh.wikipedia.org/wiki/%E5%89%8D%E7%AB%AF%E5%92%8C%E5%90%8E%E7%AB%AF
[Link 6]: https://zh.wikipedia.org/wiki/%E5%85%B3%E6%B3%A8%E7%82%B9%E5%88%86%E7%A6%BB
[Link 7]: https://zh.wikipedia.org/wiki/%E7%BD%AE%E6%A0%87%E8%AF%AD%E8%A8%80
[1]: https://zh.wikipedia.org/wiki/MVVM#cite_note-MVVM-eliminates-valueconverters-1
[Link 8]: https://zh.wikipedia.org/wiki/%E5%AF%B9%E8%B1%A1_%28%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6%29
[Link 9]: https://zh.wikipedia.org/w/index.php?title=%E4%B8%AD%E4%BB%8B%E8%80%85%E6%A8%A1%E5%BC%8F&action=edit&redlink=1
[Link 10]: https://zh.wikipedia.org/wiki/%E7%94%A8%E4%BE%8B
[Link 11]: https://zh.wikipedia.org/wiki/%E9%A9%AC%E4%B8%81%C2%B7%E7%A6%8F%E5%8B%92
[2]: https://zh.wikipedia.org/wiki/MVVM#cite_note-2
[3]: https://zh.wikipedia.org/wiki/MVVM#cite_note-JoshSmith-3
[MVC]: https://zh.wikipedia.org/wiki/MVC
[Link 12]: https://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BD%AF
[WPF]: https://zh.wikipedia.org/wiki/Windows_Presentation_Foundation
[.NET]: https://zh.wikipedia.org/wiki/.NET%E6%A1%86%E6%9E%B6
[Silverlight]: https://zh.wikipedia.org/wiki/Microsoft_Silverlight
[Link 13]: https://zh.wikipedia.org/wiki/%E4%BA%8B%E4%BB%B6%E9%A9%85%E5%8B%95%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88
[ZK]: https://zh.wikipedia.org/wiki/ZK
[Web]: https://zh.wikipedia.org/wiki/Web%E5%BA%94%E7%94%A8%E6%A1%86%E6%9E%B6
[KnockoutJS]: https://zh.wikipedia.org/w/index.php?title=KnockoutJS&action=edit&redlink=1
[JavaScript]: https://zh.wikipedia.org/wiki/JavaScript
[Link 14]: https://zh.wikipedia.org/wiki/%E5%87%BD%E5%BC%8F%E5%BA%AB
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70]: /images/20220404/6c6c4a8ed71945dda682d859a349cb8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 1]: /images/20220404/6e1e16b4470846fca985a0f01cccd639.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 2]: /images/20220404/b59ea89130a144468233ff1b232037af.png