Web前端MVVM设计模式与Vue.js浅析

近几年Web的开发方式

Web1.0

简单的html和css以及js脚本，基本都是一些静态页面，复杂一些的页面大多是采用结合服务端的开发方式。前端工作大概就是切图，写html和样式。

Web2.0

出现了一批以DOM，和浏览器兼容统一的前端框架，例如jquery，bootstarp等，当然最重要的还是ajax的出现，意味着可以不重新加载页面的情况下，更新数据。同时也是前后端工作逐渐划分清晰。

Web3.0（单页面应用开发）

当前较流行的开发方式，页面开发都是以组件化模块化为基础概念，同时ECMAScript设计语言的出现，被广泛应用，也出现了以ECMAScript设计语言为基础开发的框架。例如MVVM的angular和vue。

回到主题，什么是MVVM设计模式，MVVM的全称是Model View ViewModel，这种架构模式最初是由微软作为微软软件的展现层设计模式的规范提出。

它是MVC模式的衍生物。

MCV由model、controller、view组成，视图发送指令给控制器，控制器处理业务逻辑，通知模型改变状态，模型将新数据发送给model，这是一种单向的业务。

MVVM：用户再视图输入数据，视图将模型发送给viewmodel，viewmodel处理并发送给model，model验证并将状态返回给viewmodel，viewmodel最后发送给view，展示。其中模型和视图不存在直接的业务逻辑关系。其他层都是双向的业务。

在MVVM中，model只关心数据，和验证，不关心行为。

在MVVM中，view是用户最直观的交互部分。

在MVVM中，viewmodel是一个专门转换数据的控制中心。控制这view的显示和model的数据信息。

近几年，MVVM模式在JavaScript中开始有人实现，目前比较成熟的框架有vue.js, angular.js 4.0，下面我们就以vue.js为例看下MVVM模式中个部分的具体职责和实例代码，同时理解使用这种模式开发的优点和缺点。

Vuejs是什么，可以理解为，更快速的构建用户界面的渐进式MVVM框架。他由国人尤玉溪开发，采用ES5为基础设计语言。是当前果然最热门的框架。因为他的性能以及丰富的生态系统。

那么vuejs到底能做什么，他有最重要的两个功能，模板渲染和模块组件化开发，当然还有一些非常优秀的扩展，像路由、ajax框架等。下面解释一下什么是模板渲染和组件化开发，

模板渲染同时也叫数据同步、双向绑定，传统页面开发，如果需要实现XXXX功能，而利用vuejs则XXXX。这就是模板渲染。

下面来看模块组件化开发，我们可以理解为：页面由多个组件搭建而成，例如XXXXX。这就是模块组件化开发。在vuejs中注册组件是这样的balala..

Vuejs还有一些非常优秀的扩展，如果我们需要搭建一个以vuejs构成的完全的项目，自己搭建会较麻烦，所以官网提供了一个脚手架，也叫vuejs全家桶，他基本包括vuejs2.0、router、webpack以及resource（ajax）框架。

首先先解释一下，其中最重要的路由和webpack是什么意思，路由是指根据地址分配处理程序，一般由后端处理，那么和前端的最主要的区别在于，后端路由，两个地址每次请求都会向服务器发起请求，然后服务器响应请求，过程中必然有延迟，而前端路由只是变换了地址，无网络延迟。

Webpack是指一个自动处理分析项目结构并将代码打包成浏览器能识别的语言的一个打包工具。

全家桶式的开发，需要了解dos命令，以及npm的使用。