优秀源码另一面的价值观是不朽的、基本概念的。

前些年，后端金融行业一直在迅猛发展。金融行业的进步，导致对从业者的要求急速攀升。纵览未来，虽然实际上会用某些架构还能找到组织工作，但实际上满足于会用，一定难以走得更远。随著越来越多精明又刻苦的人加入后端战团，能否看透最前沿架构的设计和同时实现已经成为科技人才与一般人才的分界线。

责任编辑将透过探求Vue.js图形中变动探测的同时实现基本原理，来阐释Github上最流行Web架构Vue.js源码另一面的价值观，让你顺道新体验从索韦泰到博奈的脱胎换骨！

变动探测的同时实现基本原理

Vue.js 最独特的特性之一是看起来并不醒目的积极响应式控制系统。统计数据源实际上是一般的JavaScript 对象。而当你修改它们时，快照会展开预览。这使得状况管理比较简单、直接。不过认知其组织工作基本原理同样关键，这样你能正视许多常用的难题。

——官方文件格式

从状况聚合DOM，再输入到界面表明的整套业务流程叫做图形，应用领域在运转时能急速地展开再次图形。而积极响应式控制系统突显架构再次图形的能力，其关键组成部分是变动探测。变动探测是积极响应式控制系统的核心，没有它，就没有再次图形。架构在运转时，快照也就难以随著状况的变动而变动。

简单来说，变动探测的作用是探测统计数据的变动。当统计数据变动时，会通知快照展开相应的预览。正如文件格式中所说，深入认知变动探测的组织工作基本原理，既能帮助他们在开发应用领域时正视许多很常用的难题，也能在应用领域程序出难题时，快速增容并复原难题。

责任编辑中，他们将针对变动探测的同时实现基本原理做两个详细介绍，并且会带着你一步棋一步棋从0 到1同时实现两个变动探测的逻辑。

什么是变动探测

Vue.js 会自动透过状况聚合DOM，并将其输入到网页上表明出来，这个操作过程叫图形。Vue.js的图形操作过程是声明式的，他们透过模版来描述状况与DOM之间的态射关系。

通常，在运转时应用领域外部的状况会急速发生变动，此时须要不停地再次图形。这时如何确定状况中发生了什么变动？

变动探测就是用来解决这个难题的，它分为两种类型：一类是推（push），另一类是拉（pull）。

Angular 和React 中的变动探测都属于拉，换言之当状况发生变动时，它不晓得哪个状况变了，只晓得状况有可能变了，然后会推送两个讯号告诉架构，架构外部收到讯号后，会展开两个暴力行为对照来找寻哪些DOM 结点须要再次图形。这在Angular 中是脏检查的业务流程，在React中使用的是虚拟DOM。

而Vue.js 的变动探测属于推。当状况发生变动时，Vue.js 立刻就晓得了，而且在一定程度上晓得哪些状况变了。因此，它晓得的信息更多，也就能展开更细粒度的预览。

所谓更细粒度的预览，就是说：假如有两个状况绑定着好多个依赖，每个依赖表示两个具体的DOM结点，那么当这个状况发生变动时，向这个状况的所有依赖推送通知，让它们展开DOM预览操作。相比较而言，拉的粒度是最粗的。

但是它也有一定的代价，因为粒度越细，每个状况所绑定的依赖就越多，依赖追踪在内存上的开销就会越大。因此，从Vue.js 2.0 开始，它引入了虚拟DOM，将粒度调整为中等粒度，即两个状况所绑定的依赖不再是具体的DOM 结点，而是两个组件。这样状况变动后，会通知到组件，组件外部再使用虚拟DOM 展开对照。这能大大降低依赖数量，从而降低依赖追踪所消耗的内存。

Vue.js 之所以能随意调整粒度，本质上还要归功于变动探测。因为推类型的变动探测能随意调整粒度。

如何追踪变动

关于变动探测，首先要问两个难题，在JavaScript（简称JS）中，如何探测两个对象的变动？

其实这个难题还是比较简单的。学过JavaScript 的人都晓得，有两种方法能探测到变动：使用Object.defineProperty 和ES6 的Proxy。

由于ES6 在浏览器中的支持度并不理想，到目前为止Vue.js 还是使用Object.define-Property 来同时实现的，所以文中也会使用它来介绍变动探测的基本原理。

由于使用Object.defineProperty 来探测变动会有很多缺陷，所以Vue.js 的作者尤雨溪说日后会使用Proxy 重写这部分代码。好在责任编辑讲的是基本原理和价值观，所以即便以后用Proxy 重写了这部分代码，文中介绍的基本原理也不会变。

晓得了Object.defineProperty 能探测到对象的变动，那么他们能写出这样的代码：

01 function defineReactive (data, key, val) {
02 Object.defineProperty(data, key, {
03 enumerable: true,
04 configurable: true,
05 get: function () {
06 return val
07 },
08 set: function (newVal) {
09 if(val === newVal){
10 return
11 }
12 val = newVal
13 }
14 })
15 }

这里的函数defineReactive 用来对Object.defineProperty 展开封装。从函数的名字能看出，其作用是定义两个积极响应式统计数据。也就是在这个函数中展开变动追踪，封装后只须要传递data、key 和val 就行了。

封装好之后，每当从data 的key 中读取统计数据时，get 函数被触发；每当往data 的key 中设置统计数据时，set 函数被触发。

如何收集依赖

如果只是把Object.defineProperty 展开封装，那其实并没什么实际用处，真正有用的是收集依赖。

现在我要问第二个难题：如何收集依赖？

思考一下，他们之所以要观察统计数据，其目的是当统计数据的属性发生变动时，能通知那些曾经使用了该统计数据的地方。

举个例子：

01
02

{{ name }}

03

该模版中使用了统计数据name，所以当它发生变动时，要向使用了它的地方推送通知。

注意：在Vue.js 2.0 中，模版使用统计数据等同于组件使用统计数据，所以当统计数据发生变动时，会将通知推送到组件，然后组件外部再透过虚拟DOM再次图形。

对于上面的难题，我的回答是，先收集依赖，即把用到统计数据name 的地方收集起来，然后等属性发生变动时，把之前收集好的依赖循环触发一遍就好了。

总结起来，其实就一句话，在getter 中收集依赖，在setter 中触发依赖。

依赖收集在哪里

现在他们已经有了很明确的目标，就是要在getter 中收集依赖，那么要把依赖收集到哪里去呢？

思考一下，首先想到的是每个key 都有两个数组，用来存储当前key 的依赖。假设依赖是两个函数，保存在window.target 上，现在就能把defineReactive 函数稍微改造一下：

01 function defineReactive (data, key, val) {
02 let dep = [] // 新增
03 Object.defineProperty(data, key, {
04 enumerable: true,
05 configurable: true,
06 get: function () {
07 dep.push(window.target) // 新增
08 return val
09 },
10 set: function (newVal) {
11 if(val === newVal){
12 return
13 }
14 // 新增
15 for (let i = 0; i