每每问到 VueJS 积极响应式基本原理，我们可能将单厢说到 Vue 透过 Object.defineProperty 方式把 data 第一类的全数特性转换成 getter/setter，当特性被出访或修正时通告变动”。但是，其外部微细的积极响应式基本原理可能将许多人都没全然认知，互联网上有关其积极响应式基本原理的该文产品质量也是良莠不齐，多半是贴个标识符加段注解了事。责任编辑Sonbhadra从两个比较简单的范例起程，一步棋一步棋预测积极响应式基本原理的具体内容同时实现路子。
一、使统计数据第一类显得 可探测
具体来说，他们表述两个统计数据第一类，就以王者荣耀里头的当中两个英雄人物为范例：
const hero = { health: 3000, IQ: 150}
他们表述了那个英雄人物的生命值为 3000，IQ 为 150。但那时还不晓得他是谁，但是这不关键，只须要晓得那个英雄人物Sonbhadra横跨他们整段，而他们的目地是透过那个英雄人物的特性，晓得那个英雄人物是谁。
那时他们能透过 hero.health 和 hero.IQ 间接随机存取那个英雄人物相关联的特性值。但，当那个英雄人物的特性被加载或修正时，他们并不知悉。所以如果怎样做才能让英雄人物积极主动说他们，他的特性被修正了呢？这时就须要借助于 Object.defineProperty 的精神力量了。
有关 Object.defineProperty 的如是说，MDN 上是所以说的：
Object.defineProperty() 方式会间接在两个第一类上表述两个新特性，或是修正两个第一类的原有特性， 并回到那个第一类。
在责任编辑中，他们只采用那个方式使第一类显得 可探测，更多有关那个方式的概要，请参照https://developer.mozilla.org…，就不再赘述了。所以怎样让那个英雄人物积极主动通告他们其特性的随机存取情况呢？具体来说改写一下上面的范例：
let hero = {}let val = 3000Object.defineProperty(hero, health, { get () { console.log(我的health特性被加载了！) return val }, set (newVal) { console.log(我的health属性被修正了！) val = newVal }})
他们透过 Object.defineProperty 方式，给 hero 表述了两个 health 特性，那个特性在被随机存取的时候单厢触发一段 console.log。那时来尝试一下：
console.log(我的health特性被加载了！)// -> 3000// -> 我的health特性被加载了！hero.health = 5000// -> 我的health特性被修正了
能看到，英雄人物已经能积极主动说他们其特性的随机存取情况了，这也意味着，那个英雄人物的统计数据第一类已经是“可探测”的了。为了把英雄人物的所有特性都显得可探测，他们能想两个办法：
/** * 使一个第一类转换成可探测第一类 * @param { Object } obj 第一类 * @param { String } key 第一类的key * @param { Any } val 第一类的某个key的值 */function defineReactive (obj, key, val) { Object.defineProperty(obj, key, { get () { // 触发getter console.log(`我的${key}特性被加载了！`) return val }, set (newVal) { // 触发setter console.log(`我的${key}特性被修正了！`) val = newVal } })}/** * 把两个第一类的每一项都转换成可探测第一类 * @param { Object } obj 第一类 */function observable (obj) { const keys = Object.keys(obj) keys.forEach((key) => { defineReactive(obj, key, obj[key]) }) return obj}
const hero = observable({ health: 3000, IQ: 150})
读者们能在控制台自行尝试随机存取英雄人物的特性，看看它是不是已经变得可探测的。
二、计算特性
那时，英雄人物已经显得可探测，任何的随机存取操作他单厢积极主动说他们，但也仅此而已，他们仍然不晓得他是谁。如果他们希望在修正英雄人物的生命值和IQ之后，他能积极主动说他的其他信息，这如果怎样才能办到呢？假设能这样：
watcher(hero, type, () => { return hero.health > 4000 ? 坦克 : 脆皮})
他们表述了两个 watcher 作为 监听器，它监听了 hero 的 type 特性。那个 type 特性的值取决于 hero.health，换句话来说，当 hero.health 发生变动时，hero.type 也如果发生变动，前者是后者的依赖。他们能把那个 hero.type 称为 计算特性。
所以，他们如果怎样才能正确构造那个监听器呢？能看到，在设想当中，监听器接收三个参数，分别是被监听的第一类、被监听的特性以及回调函数，回调函数回到两个该被监听特性的值。顺着那个路子，他们尝试着编写一段标识符：
/** * 当计算特性的值被更新时调用 * @param { Any } val 计算特性的值 */function onComputedUpdate (val) { console.log(`我的类型是：${val}`);}/** * 探测者 * @param { Object } obj 被探测第一类 * @param { String } key 被探测第一类的key * @param { Function } cb 回调函数，回到“计算特性”的值 */function watcher (obj, key, cb) { Object.defineProperty(obj, key, { get () { const val = cb() onComputedUpdate(val) return val }, set () { console.error(计算特性无法被赋值！) } })}
那时他们能把英雄人物放在监听器里头，尝试跑一下上面的标识符：
watcher(hero, type, () => { return hero.health > 4000 ? 坦克 : 脆皮})hero.typehero.health = 5000hero.type// -> 我的health特性被加载了！// -> 我的类型是：脆皮// -> 我的health特性被修正了！// -> 我的health特性被加载了！// -> 我的类型是：坦克
那时看起来没毛病，一切都运行良好，是不是就这样结束了呢？别忘了，他们那时是透过手动加载 hero.t
三、倚赖搜集
他们晓得，当两个可探测第一类的特性被随机存取时，会触发它的 getter/setter 方式。换个路子，如果他们能在可探测第一类的getter/setter里头，去执行监听器里头的 onComputedUpdate() 方式，是不是就能同时实现让第一类积极主动发出通告的功能呢？
由于监听器内的 onComputedUpdate() 方式须要接收回调函数的值作为参数，而可探测第一类内并没那个回调函数，所以他们须要借助于一个第三方来帮助他们把监听器和可探测第一类连接起来。
那个第三方就做一件事情——搜集监听器内的回调函数的值以及 onComputedUpdate() 方式。
那时他们把那个第三方命名为 倚赖搜集器，一起来看看如果怎么写：
const Dep = { target: null}
是所以简单。倚赖搜集器的 target 是用来存放监听器里头的 onComputedUpdate() 方式的。
表述完倚赖搜集器，我们回到监听器里，看看如果在什么地方把 onComputedUpdate() 方式赋值给 Dep.target：
function watcher (obj, key, cb) { // 表述两个被动触发函数，当那个“被探测第一类”的倚赖更新时调用 const onDepUpdated = () => { const val = cb() onComputedUpdate(val) } Object.defineProperty(obj, key, { get () { Dep.target = onDepUpdated // 执行cb()的过程中会用到Dep.target， // 当cb()执行完了就重置Dep.target为null const val = cb() Dep.target = null return val }, set () { console.error(计算特性无法被赋值！) } })}
他们在监听器外部表述了两个新的 onDepUpdated() 方式，那个方式很简单，是把监听器回调函数的值以及 onComputedUpdate() 给打包到一块，然后赋值给 Dep.target。这一步棋非常关键，透过这样的操作，倚赖搜集器就获得了监听器的回调值以及 onComputedUpdate() 方式。作为全局变量，Dep.target 理所当然的能被可探测第一类的 getter/setter 所采用。
watcher(hero, type, () => { return hero.health > 4000 ? 坦克 : 脆皮})
在它的回调函数中，调用了英雄人物的 health 特性，也是触发了相关联的 getter 函数。理清楚这一点很关键，因为接下来他们须要回到表述可探测第一类的 defineReactive() 方式当中，对它进行改写：
function defineReactive (obj, key, val) { const deps = [] Object.defineProperty(obj, key, { get () { if (Dep.target && deps.indexOf(Dep.target) === -1) { deps.push(Dep.target) } return val }, set (newVal) { val = newVal deps.forEach((dep) => { dep() }) } })}
能看到，在那个方式里头他们表述了两个空数组 deps，当 getter 被触发的时候，就会往里头添加两个 Dep.target。回到关键知识点 Dep.target 等于监听器的 onComputedUpdate() 方式，那个时候可探测第一类已经和监听器捆绑到一块。任何时候当可探测第一类的 setter 被触发时，就会调用数组中所保存的 Dep.target 方式，也是自动触发监听器外部的 onComputedUpdate() 方式。
至于为什么这里的 deps 是两个数组而不是两个变量，是因为可能将同两个特性会被多个计算特性所倚赖，也是存在多个 Dep.target。表述 deps 为数组，若当前特性的setter被触发，就能批量调用多个计算特性的 onComputedUpdate() 方式了。
完成了这些步骤，基本上他们整个积极响应式系统就已经搭建完成，下面贴上完整的标识符：
/** * 表述两个“倚赖搜集器” */const Dep = { target: null}/** * 使两个第一类转换成可探测第一类 * @param { Object } obj 第一类 * @param { String } key 第一类的key * @param { Any } val 第一类的某个key的值 */function defineReactive (obj, key, val) { const deps = [] Object.defineProperty(obj, key, { get () { console.log(`我的${key}特性被加载了！`) if (Dep.target && deps.indexOf(Dep.target) === -1) { deps.push(Dep.target) } return val }, set (newVal) { console.log(`我的${key}特性被修正了！`) val = newVal deps.forEach((dep) => { dep() }) } })}/** * 把两个第一类的每一项都转换成可探测第一类 * @param { Object } obj 第一类 */function observable (obj) { const keys = Object.keys(obj) for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i], obj[keys[i]]) } return obj}/** * 当计算特性的值被更新时调用 * @param { Any } val 计算特性的值 */function onComputedUpdate (val) { console.log(`我的类型是：${val}`)}/** * 探测者 * @param { Object } obj 被探测第一类 * @param { String } key 被探测第一类的key * @param { Function } cb 回调函数，回到“计算特性”的值 */function watcher (obj, key, cb) { // 表述两个被动触发函数，当那个“被探测第一类”的倚赖更新时调用 const onDepUpdated = () => { const val = cb() onComputedUpdate(val) } Object.defineProperty(obj, key, { get () { Dep.target = onDepUpdated // 执行cb()的过程中会用到Dep.target， // 当cb()执行完了就重置Dep.target为null const val = cb() Dep.target = null return val }, set () { console.error(计算特性无法被赋值！) } })}const hero = observable({ health: 3000, IQ: 150})watcher(hero, type, () => { return hero.health > 4000 ? 坦克 : 脆皮})console.log(`英雄人物初始类型：${hero.type}`)hero.health = 5000// -> 我的health特性被加载了！// -> 英雄人物初始类型：脆皮// -> 我的health特性被修正了！// -> 我的health特性被加载了！// -> 我的类型是：坦克
上述标识符能间接在code pen点击预览或是浏览器控制台上执行。
四、标识符优化
在上面的范例中，倚赖搜集器只是两个简单的第一类，其实在 defineReactive() 外部的 deps 数组等和倚赖搜集有关的功能，都如果集成在 Dep 实例当中，所以他们能把倚赖搜集器改写一下：
class Dep { constructor () { this.deps = [] } depend () { if (Dep.target && this.deps.indexOf(Dep.target) === -1) { this.deps.push(Dep.target) } } notify () { this.deps.forEach((dep) => { dep() }) }}Dep.target = null
同样的道理，他们对 observable 和 watcher 都进行一定的封装与优化，使那个积极响应式系统显得模块化：
class Observable { constructor (obj) { return this.walk(obj) } walk (obj) { const keys = Object.keys(obj) keys.forEach((key) => { this.defineReactive(obj, key, obj[key]) }) return obj } defineReactive (obj, key, val) { const dep = new Dep() Object.defineProperty(obj, key, { get () { dep.depend() return val }, set (newVal) { val = newVal dep.notify() } }) }}class Watcher { constructor (obj, key, cb, onComputedUpdate) { this.obj = obj this.key = key this.cb = cb this.onComputedUpdate = onComputedUpdate return this.defineComputed() } defineComputed () { const self = this const onDepUpdated = () => { const val = self.cb() this.onComputedUpdate(val) } Object.defineProperty(self.obj, self.key, { get () { Dep.target = onDepUpdated const val = self.cb() Dep.target = null return val }, set () { console.error(计算特性无法被赋值！) } }) }}
const hero = new Observable({ health: 3000, IQ: 150})new Watcher(hero, type, () => { return hero.health > 4000 ? 坦克 : 脆皮}, (val) => { console.log(`我的类型是：${val}`)})console.log(`英雄人物初始类型：${hero.type}`)hero.health = 5000// -> 英雄人物初始类型：脆皮// -> 我的类型是：坦克
标识符已经放在code pen点击预览，浏览器控制台也是能运行的~
五、尾声
看到上述的标识符，是不是发现和 VueJS 源码里头的很像？其实 VueJS 的路子和基本原理也是类似的，只但是它做了更多的事情，但核心还是在这里边。
在学习 VueJS 源码的时候，曾经被积极响应式基本原理弄得头昏脑涨，并非一下子就看懂了。后在不断的思考与尝试下，同时参照了许多其他人的路子，才总算把这一块的知识点全然掌握。希望这篇该文对我们有帮助，如果发原有任何错漏的地方，也欢迎向我指出。
