针对VUE框架中MVVM原理的初探并且在具体的项目中实践

多年互联网行业经验，对HTML5，node端，前端框架，构建工具有浓厚的兴趣，目前担任专车前端组的技术负责人

1，为什么要用 vue

大前端目前已经到一个空前的繁荣阶段，各种框架类库层出不穷，我想每选择一个框架，肯定都能找到高度同质化的两到三个框架。那么在目前 mvvm 盛行的前端架构下，我们为什么选择了 vue，而不去用 react，不用 angular 呢？

首先他们都是非常典型的前端 mvvm 框架，很好的解决了业务逻辑中 view 和 model 之间的关系，用到这些框架之后，我们不会再像之前使用 jQuery 一样，页面的展示和数据有高度的耦合性，甚至不在需要选择器了。

而 vue 相比于 react、angular，首先他是一位我们国内的开发者开发的，有很好的 API 文档、样例等。国外的技术性文档在翻译的过程中对译者还是有很高要求，否则对于大部分开发者通过简单阅读之后还是很难有较深的理解；

其次他有一个很好的入门起点，对于不是那么熟练 node，npm，webpack 和 ES6 的开发者来讲，也可以看着文档 demo 很快的入手，进入到项目开发中，而且 vue 组件的模板写法对于使用过传统模板的开发者来说更易于理解上手。

虽然 react 的 jsx 能够允许把设计师提供的 HTML 原型直接黏贴过去，但依然有大量的改造工作，而这部分的改造对于开发者来说就像是需要掌握一门新的模板语言一样，比如开发者要手动把 class 和 for 属性替换成 className 和 htmlFor，还要把内联的 style 样式从 css 语法改成 JSON 语法等。

在数据的双向绑定方面，angular 采用了脏检查的方式，当有数据发生变化时，对所有的数据和视图的绑定关系做一次检查，当随着 ng-app 根节点下的 DOM 变得越发复杂的时候，脏检查的效率会变得越来越低，这就要求我们在写业务逻辑的过程中，需要不断的去考虑怎么解决框架所带来的的性能瓶颈。而 vue 使用的 ES5 中 Object.defineProperty()方法来实现 model 和 view 层的关联，他可以精确的将数据的变化映射到对应视图上，和 DOM 的复杂度没有正向关系。（当然 vue 在这里的劣势就是不能够在不支持 ES5 的浏览器上使用）

2，vue 的数据观察者模式，先从源码开始

这个实例中，当每次改变了 data 中 a 属性的值，都会输出 the data a value changeed，我们看看这个过程中到底发生了什么。

在 Vue 2.2.4 版本中会看到下面的代码：

def 方法是通过 ES5 的 Object.defineProperty()来注册对象，

注意看 set 里面的 dep.notify 方法，这个就是每次对象属性值发生改变的时候，发出一个通知，看看 notify 里面都干了哪些事情：

notify 是 Dep 中的一个方法，Dep 主要实现了一个消息列表的管理，每一条消息会通过 addSub 方法 push 进来，当触发 notify 时，会把所有消息 update 一次（在 update 中会做 diff 判断，没有发生改变的状态，不会被做逻辑处理）

接下来看看这个通知是怎么被接收到的，类库里面有一个 Watcher 类专门处理被接受到的消息，Watcher 的构造函数如下：

当 object 属性的值发生变化时，会触发 watcher 通过构造函数传入的 callback 方法，最终实现对数据变化的监听。

3，项目中的 vue

在传统的团队协作开发中，通常会按照页面的粒度来分工合作，团队每个成员负责一个页面或者多各页面，基本上细化到一个页面的逻辑至少由一位成员来负责完成；

Vue 按照组件化的方式开发，能够把粒度化拆解的更细：

页面中可以按照功能拆接出若干个模块，其中每个模块的逻辑都相对独立。当前页面的所有数据逻辑在一个 model 里面管理， 以 map-phono-cp 为例：

实例化出来一个组件，通过 Vue.component 来注册成 Vue 的全局组件，这样在初始化 Vue 的时候，会将页面 DOM 中对应的所有组件解析。

每一个组件都可以直接操作页面的 model，当 model 发生改变，vue 会将数据的变化直接映射到 view 上。这样每个组件的开发者都会有一个更清晰的开发思路，不会再有复杂的 DOM 操作，不会再有各种获取 DOM 节点绑定事件的行为，让开发变得更顺畅起来。

最后也来展望一下 vue 的未来，vue 作为 mvvm 的后起之秀，有着非常高的关注度，这不光是前面提到的一些特点，主要也继承了之前框架的大部分优点，比如在 Vue2.0 中也支持了 virtual DOM，使 DOM 的操作有更高的效率，并且支持 SSR（server side render），对有首屏渲染加速有更好的支持。