什么是MVVM

从1989年HTML诞生到现在,在浏览器端编写前端代码一共有经历了四个阶段:

第一阶段:纯静态的html页面,预先编写好存放在Web服务器上的html文件。浏览器请求某个URL时,Web服务器把对应的html文件扔给浏览器,就可以显示html文件的内容了

第二阶段:利用C、C++这些编程语言,直接向浏览器输出拼接后的字符串。这种技术被称为CGI:Common Gateway Interface。

第三阶段:新的创建动态HTML的方式:ASP、JSP和PHP,需要替换的变量用特殊的<%=var%>标记出来了,再配合循环、条件判断,创建动态HTML就比CGI要容易得多

第四阶段:浏览器想要自己修改HTML页面的内容,就需要等到1995年年底,JavaScript被引入到浏览器。有了JavaScript后,浏览器就可以运行JavaScript,然后,对页面进行一些修改。JavaScript还可以通过修改HTML的DOM结构和CSS来实现一些动画效果,而这些功能没法通过服务器完成,必须在浏览器实现。第四阶段又经历了四个阶段
第一阶段,直接用JavaScript操作DOM节点,使用浏览器提供的原生API:
第二阶段,由于原生API不好用,还要考虑浏览器兼容性,jQuery横空出世
第三阶段,MVC模式,需要服务器端配合,JavaScript可以在前端修改服务器渲染后的数据。
第四阶段至今,随着前端页面越来越复杂,用户对于交互性要求也越来越高,想要写出Gmail这样的页面,仅仅用jQuery是远远不够的。MVVM模型应运而生。MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。

MVVM的核心是数据驱动即ViewModel,ViewModel是View和Model的关系映射。ViewModel类似中转站(Value Converter),负责转换Model中的数据对象,使得数据变得更加易于管理和使用。MVVM本质就是基于操作数据来操作视图进而操作DOM,借助于MVVM无需直接操作DOM,开发者只需完成包含声明绑定的视图模板,编写ViewModel中有业务,使得View完全实现自动化。

什么是MVVM

vue中的MVVM思想

viewmodel做了两件事情。
1.数据绑定 把js里面的数据通过插值操作mustachae语法绑定到真实dom里面 而且是响应式的 一旦数据发生改变
自动监听到数据的改变,把最新的数据再重新绑定到view上面,view里面显示得永远是model里面最新的数据

2.DOM监听
当view上面有一些事件或者用户操作的时候,通过指令,把事件响应相关的东西,绑定到model里面,在model里面可以写一些js代码(比如回调methods里面定义的一些函数)

什么是MVVM

什么是MVVM

什么是MVVM

相关推荐