Vue中的MVVM

什么是MVVM?

MVVMModel–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]

MVVM

以上来自维基百科

Vue的MVVM

image-20210724212444302

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

计数器的MVVM

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

image-20210724213802017

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

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