深入讲解 Vue 中实现原理

前言

随着 Vue2.0 的发布，前端入门的要求也越来越低，已至于 Vue 已经成为一个前端的标配，最近也面了很多前端开发工程师，发现大部分都停留在用的阶段上，建议大家看看源码，学学 Vue 的思想。

本文中，读者配合作者的 GitHub 去实践，相信会有很大的提升。

双向数据绑定 Model View ViewModel

Angular1.x 当中的双向数据绑定是通过监听的方式来实现的，核心思想为脏值检查，Angular 通过去监听值得变化，然后调用方法来实现。

Vue 的双向数据绑定是通过数据劫持 + 发布订阅模式（不兼容低版本）+ 数据代理的方式来实现的。

今天主要讲 Vue

Vue 不兼容低版本，是因为低版本浏览器不兼容 Object.defineProperty 这个属性，我们首先了解一下正常情况下定义的对象。

如果我们用到了 Object.defineProperty 这个属性再去定义一个对象，在控制台中你就会发现不同了， 在原型链上多了一些方法。

想要了解这些属性的全部参数的话，可以去 MDN 上查看一下。我们在进行值修改的时候，就会用到 get、set方法。

我们通常写 Vue 的时候，都会这样写：

那么如何去实现呢？我们用这个 Object.defineProperty 这个属性来实现数据劫持（Observer）。

数据劫持：观察对象，通过递归给每一个对象增加 Object.definePropery，在 set 方法中触发 observe 方法，就能监听到数据的变化，如果数据类型是 }多层的，那么就要用到递归去实现。

Vue 中的数据代理

我们会遇到一些比较复杂的数据结构，例如。

如果你用的是我上面写的 observe 方法就会发现，我要获取 creator 字段的话，需要通过的形式来获取值。遇到再复杂的数据结构就会更乱。然而我们想要通过方式来获取数据（去掉_data）。去掉复杂的查询方式，所以用到了数据代理的方式来处理以上问题，其中 this 代表的是整个数据。

Vue 特点，不能新增不存在的属性 ，因为不存在的属性没有 get、set 方法。而 Vue 当中的深度响应，会给每一个新对象增加数据劫持，从而去监控新对象的变化。

模板编译 Compile

Vue 项目中我们通过 {{}} 的方式来替换 data 值，首先我们通过 #el 来确定编译的范围，创建标签，在内存中去更换我们的模板减少 DOM 操作，通过 nodeType 来判断当前的节点，利用正则来匹配 {{}} 通过递归的方式来更换每一个数据。

发布订阅模式（重点）

以上的操作已经完成了一个简单的数据与模板的绑定，那么大家关心的数据驱动该如何实现？当一个值发生变化的时候视图也发生变化，这就需要我们去订阅一些事件。

ep.addSub(Dep.target) 是增加订阅，dep.notify 函数是发布事件。当值发生改变的时候我们去发布这个事件（调用dep.notify()）。

如何去订阅一些事件

说到订阅，那么问题来了，谁是订阅者？怎么往订阅器添加订阅者？在 dep-subs.js 中我指定了 Wathcher 是订阅者。首先要增加 Wathcher 是订阅者，把订阅者放到订阅器（subs）中当值发生变化的时候，订阅器就会调用 update 方法去发布一些事件。

增加订阅

发布订阅

观察者