Vue中的MVVM

什么是MVVM？

MVVM（Model–view–viewmodel）是一种软件架构模式。

MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，[1] 这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。[1] 视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。

MVVM是马丁·福勒的PM（Presentation Model）设计模式的变体。[2][3] MVVM以相同的方式抽象出视图的状态和行为，[3] 但PM以不依赖于特定用户界面平台的方式抽象出视图（建立了视图模型）。
MVVM和PM都来自MVC模式。

MVVM由微软架构师Ken Cooper和Ted Peters开发，通过利用WPF（微软.NET图形系统）和Silverlight（WPF的互联网应用衍生品）的特性来简化用户界面的事件驱动程式设计。[3] 微软的WPF和Silverlight架构师之一John Gossman于2005年在他的博客上发表了MVVM。

MVVM也被称为model-view-binder，特别是在不涉及.NET平台的实现中。ZK（Java写的一个Web应用框架）和KnockoutJS（一个JavaScript库）使用model-view-binder。[3][4][5]

以上来自维基百科。

Vue的MVVM

• view层
  • 视图层
  • 前端开发中，也称为DOM层
  • 主要作用是给用户展示各种信息
• Model层
  • 数据层
  • 数据可能是我们的死数据，更多的是来自服务器，从网络上请求下来的数据
  • 在上一节计数器案例中，就是后面抽取出来的obj。
• VueModel层
  • 视图模型层
  • 视图模型层是View和Model沟通的桥梁
  • 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
  • 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。

计数器的MVVM

在上一节的案例中，也体现了MVVM。

• 计数器案例中就有严格的MVVM思想
  • View依然是我们的DOM
  • Model就是我们抽离出来的obj
  • ViewModel就是我们创建的Vue对象实例
• 它们之间是如何工作的？
  • 首先ViewModel通过Data Binding让obj中的数据实时地在DOM中显示
  • 其次ViewModel通过DOM Listener来监听DOM事件，并且通过metgods中的操作，来改变obj中的数据。

有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作。