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的编写工作。