本文将带你了解WEBAPP开发之vue-webapp初体验之--mvvm的简单介绍，希望本文对大家学WEBAPP有所帮助。

mvvm简介

mvvm是Model(模型)View（视图）ViewModel（视图模型）的简称。这就是页面渲染和数据交互的全部内容。下面看图说话：




1、View也就是视图，也就是dom；
2、Model也就是模型，简单理解成JavaScript相关数据；
3、ViewModel也就是视图模型，也就可以理解成沟通view已经model的桥梁（这不是废话么）；
何谓桥梁？
1.当用户进行dom操作时view就会告诉vm，然后vm会根据自定义的相关操作然后告诉model说下那个变量x给这么动一下。
2.当model发生改变时model就会告诉vm这个数据变了，然后vm根据自定义相关操作通知view这个dom节点需要改变。
3.vm充当的是一个观察者的角色，时刻关注着view/model的变化。
为什么要用mvvm
1、简化复杂逻辑数据交互

举个栗子：在使用原生js或者jq中数据发生变化，首先需要通过选择器找到相关dom节点，然后进行操作例如element的显隐、dom增减、类的添加等等，在mvvm中，只需要采用适当的指令，绑定相关变量即可操作，免去诸多逻辑上的烦恼。

2、实现单页页面

为毛要单页呢？以往项目中请求新的页面都要通过页面刷新，都需要全部请求新的资源。虽然资源可以通过缓存机制进行优化，但是新页面的加载js,css,html文件全都要被浏览器重新解析，造成资源的浪费，尤其是对移动端十分不友好。通过单页应用的异步请求局部刷新这一特性，解决了这一个问题。（同样要说的是，spa单页对seo的打击也是毁灭性的。）

  

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！