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

多年互联网行业经验，对HTML5，node端，前端框架，建立东西有稠密的乐趣，目前担任专车前端组的手艺担任人

大前端目前曾经到一个空前的繁荣阶段，各类框架类库屡见不鲜，我想每选择一个框架，必定都能找到高度同质化的两到三个框架。那么在目前 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 的浏览器上利用）

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

Observer类为每个object的每个属性添加getter、setter方式，而且实现当对象属性值发生变化时，会发出一个通知。

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

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

接下来看看这个通知是怎样被领受到的，类库里面有一个 Watcher 类特地处置被接遭到的动静，Watcher 的机关函数如下：

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

在保守的团队协作开辟中，凡是会按照页面的粒度来分工合作，团队每个成员担任一个页面或者多各页面，根基上细化到一个页面的逻辑至多由一位成员来担任完成；

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

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

每一个组件都能够间接操作页面的 model，当 model 发生改变，vue 会将数据的变化间接映照到 view 上。如许每个组件的开辟者城市有一个更清晰的开辟思绪，不会再有复杂的 DOM 操作，不会再有各类获取 DOM 节点绑定事务的行为，闪开发变得更顺畅起来。

最初也来瞻望一下 vue 的将来，vue 作为 mvvm 的后起之秀，有着很是高的关心度，这不但是前面提到的一些特点，次要也承继了之前框架的大部门长处，好比在 Vue2.0 中也支撑了 virtual DOM，使 DOM 的操作有更高的效率，而且支撑 SSR（server side render），对有首屏衬着加快有更好的支撑。