专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
程序员小灰  ·  小灰筹划6年的“仓鼠币系统”，终于上线了！ ·  2 天前  
OSC开源社区  ·  Bun ... ·  2 天前  
程序猿  ·  41岁DeepMind天才科学家去世：长期受 ... ·  3 天前  
程序员的那些事  ·  OpenAI ... ·  3 天前  
程序员的那些事  ·  印度把 DeepSeek ... ·  4 天前  
51好读  ›  专栏  ›  SegmentFault思否

深入浅出基于“依赖收集”的响应式原理

SegmentFault思否  · 公众号  · 程序员  · 2017-09-18 08:00

正文

每当问到VueJS响应式原理，大家可能都会脱口而出“Vue通过 Object.defineProperty 方法把 data 对象的全部属性转化成getter/setter，当属性被访问或修改时通知变化”。然而，其内部深层的响应式原理可能很多人都没有完全理解，网络上关于其响应式原理的文章质量也是参差不齐，大多是贴个代码加段注释了事。本文将会从一个非常简单的例子出发，一步一步分析响应式原理的具体实现思路。

一、使数据对象变得“可观测”

首先，我们定义一个数据对象，就以王者荣耀里面的其中一个英雄为例子： 

  1. const hero = {
  2.   health: 3000,
  3.   IQ: 150
  4. }

我们定义了这个英雄的生命值为3000，IQ为150。但是现在还不知道他是谁，不过这不重要，只需要知道这个英雄将会贯穿我们整篇文章，而我们的目的就是通过这个英雄的属性，知道这个英雄是谁。

现在我们可以通过 hero.health 和 hero.IQ 直接读写这个英雄对应的属性值。但是，当这个英雄的属性被读取或修改时，我们并不知情。那么应该如何做才能够让英雄主动告诉我们，他的属性被修改了呢？这时候就需要借助 Object.defineProperty 的力量了。

关于 Object.defineProperty 的介绍，MDN上是这么说的：

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

在本文中，我们只使用这个方法使对象变得“可观测”，更多关于这个方法的具体内容，请参考： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty ，就不再赘述了。

那么如何让这个英雄主动通知我们其属性的读写情况呢？首先改写一下上面的例子： 

  1. let hero = {}
  2. let val = 3000
  3. Object.defineProperty(hero, 'health', {
  4.   get () {
  5.     console.log('我的health属性被读取了！')
  6.     return val
  7.   },
  8.   set (newVal) {
  9.     console.log('我的health属性被修改了！')




    

  10.     val = newVal
  11.   }
  12. })

我们通过 Object.defineProperty 方法，给hero定义了一个health属性，这个属性在被读写的时候都会触发一段 console.log 。现在来尝试一下： 

  1. console.log(hero.health)
  3. // -> 3000
  4. // -> 我的health属性被读取了！
  6. hero.health = 5000
  7. // -> 我的health属性被修改了

可以看到，英雄已经可以主动告诉我们其属性的读写情况了，这也意味着，这个英雄的数据对象已经是“可观测”的了。为了把英雄的所有属性都变得可观测，我们可以想一个办法： 

  1. /**
  2.  * 使一个对象转化成可观测对象
  3.  * @param { Object } obj 对象
  4.  * @param { String } key 对象的key
  5.  * @param { Any } val 对象的某个key的值
  6.  */




    

  7. function defineReactive (obj, key, val) {
  8.   Object.defineProperty(obj, key, {
  9.     get () {
  10.       // 触发getter
  11.       console.log(`我的${key}属性被读取了！`)
  12.       return val
  13.     },
  14.     set (newVal) {
  15.       // 触发setter
  16.       console.log(`我的${key}属性被修改了！`)
  17.       val = newVal
  18.     }
  19.   })
  20. }




    

  22. /**
  23.  * 把一个对象的每一项都转化成可观测对象
  24.  * @param { Object } obj 对象
  25.  */
  26. function observable (obj) {
  27.   const keys = Object.keys(obj)
  28.   keys.forEach((key) => {
  29.     defineReactive(obj, key, obj[key])
  30.   })
  31.   return




    
 obj
  32. }

现在我们可以把英雄这么定义： 

  1. const hero = observable({
  2.   health: 3000,
  3.   IQ: 150
  4. })

读者们可以在控制台自行尝试读写英雄的属性，看看它是不是已经变得可观测的。

二、计算属性

现在，英雄已经变得可观测，任何的读写操作他都会主动告诉我们，但也仅此而已，我们仍然不知道他是谁。如果我们希望在修改英雄的生命值和IQ之后，他能够主动告诉他的其他信息，这应该怎样才能办到呢？假设可以这样： 

  1. watcher(hero, 'type', () => {
  2.   return hero.health > 4000 ? '坦克' : '脆皮'




    

  3. })

我们定义了一个 watcher 作为“监听器”，它监听了hero的type属性。这个type属性的值取决于 hero.health ，换句话来说，当 hero.health 发生变化时， hero.type 也应该发生变化，前者是后者的依赖。我们可以把这个 hero.type 称为“计算属性”。

那么，我们应该怎样才能正确构造这个监听器呢？可以看到，在设想当中，监听器接收三个参数，分别是被监听的对象、被监听的属性以及回调函数，回调函数返回一个该被监听属性的值。顺着这个思路，我们尝试着编写一段代码： 

  1. /**
  2.  * 当计算属性的值被更新时调用
  3.  * @param { Any } val 计算属性的值
  4.  */
  5. function onComputedUpdate (val) {
  6.   console.log(`我的类型是：${val}`);
  7. }
  8. 




    

  9. /**
  10.  * 观测者
  11.  * @param { Object } obj 被观测对象
  12.  * @param { String } key 被观测对象的key
  13.  * @param { Function } cb 回调函数，返回“计算属性”的值
  14.  */
  15. function watcher (obj, key, cb) {
  16.   Object.defineProperty(obj, key, {
  17.     get () {




    

  18.       const val = cb()
  19.       onComputedUpdate(val)
  20.       return val
  21.     },
  22.     set () {
  23.       console.error('计算属性无法被赋值！')
  24.     }
  25.   })
  26. }

现在我们可以把英雄放在监听器里面，尝试跑一下上面的代码： 

  1. watcher(hero, 'type', () => {
  2.   return hero.health > 4000 ? '坦克' : '脆皮'
  3. })
  5. hero.type
  7. hero.health = 5000
  8. 




    

  9. hero.type
  11. // -> 我的health属性被读取了！
  12. // -> 我的类型是：脆皮
  13. // -> 我的health属性被修改了！
  14. // -> 我的health属性被读取了！
  15. // -> 我的类型是：坦克

现在看起来没毛病，一切都运行良好，是不是就这样结束了呢？别忘了，我们现在是通过手动读取 hero.type 来获取这个英雄的类型，并不是他主动告诉我们的。如果我们希望让英雄能够在health属性被修改后，第一时间 主动 发起通知，又该怎么做呢？这就涉及到本文的核心知识点——依赖收集。

三、依赖收集

我们知道，当一个可观测对象的属性被读写时，会触发它的getter/setter方法。换个思路，如果我们可以在可观测对象的getter/setter里面，去执行监听器里面的 onComputedUpdate() 方法，是不是就能够实现让对象主动发出通知的功能呢？

由于监听器内的 onComputedUpdate() 方法需要接收回调函数的值作为参数，而可观测对象内并没有这个回调函数，所以我们需要借助一个第三方来帮助我们把监听器和可观测对象连接起来。

这个第三方就做一件事情——收集监听器内的回调函数的值以及 onComputedUpdate() 方法。

现在我们把这个第三方命名为“依赖收集器”，一起来看看应该怎么写： 

  1. const Dep = {
  2.   target: null
  3. }

就是这么简单。依赖收集器的target就是用来存放监听器里面的 onComputedUpdate() 方法的。

定义完依赖收集器，我们回到监听器里，看看应该在什么地方把 onComputedUpdate() 方法赋值给 Dep.target ： 

  1. function watcher (obj, key, cb) {
  2.   // 定义一个被动触发函数，当这个“被观测对象”的依赖更新时调用
  3.   const onDepUpdated = () => {
  4.     const val = cb()
  5.     onComputedUpdate(val)




    

  6.   }
  8.   Object.defineProperty(obj, key, {
  9.     get () {
  10.       Dep.target = onDepUpdated
  11.       




    
// 执行cb()的过程中会用到Dep.target，
  12.       // 当cb()执行完了就重置Dep.target为null
  13.       const val = cb()
  14.       Dep.target = null
  15.       return val
  16.     },




    

  17.     set () {
  18.       console.error('计算属性无法被赋值！')
  19.     }
  20.   })
  21. }

我们在监听器内部定义了一个新的 onDepUpdated() 方法，这个方法很简单，就是把监听器回调函数的值以及 onComputedUpdate() 给 打包 到一块，然后赋值给 Dep.target 。这一步非常关键，通过这样的操作，依赖收集器就获得了监听器的回调值以及 onComputedUpdate() 方法。作为全局变量， Dep.target 理所当然的能够被可观测对象的getter/setter所使用。

重新看一下我们的watcher实例： 

  1. watcher(hero, 'type', () => {
  2.   return hero.health > 




    
4000 ? '坦克' : '脆皮'
  3. })

在它的回调函数中，调用了英雄的 health 属性，也就是触发了对应的getter函数。理清楚这一点很重要，因为接下来我们需要回到定义可观测对象的 defineReactive() 方法当中，对它进行改写： 

  1. function defineReactive (obj, key, val) {
  2.   const deps = []
  3.   




    
Object.defineProperty(obj, key, {
  4.     get () {
  5.       if (Dep.target && deps.indexOf(Dep.target) === -1) {
  6.         deps.push(Dep.target)
  7.       }
  8.       




    
return val
  9.     },
  10.     set (newVal) {
  11.       val = newVal
  12.       deps.forEach((dep) => {
  13.         dep()




    

  14.       })
  15.     }
  16.   })
  17. }

可以看到，在这个方法里面我们定义了一个空数组 deps ，当getter被触发的时候，就会往里面添加一个 Dep.target 。回到关键知识点 Dep.target等于监听器的onComputedUpdate()方法 ，这个时候可观测对象已经和监听器捆绑到一块。任何时候当可观测对象的setter被触发时，就会调用数组中所保存的 Dep.target 方法，也就是自动触发监听器内部的 onComputedUpdate() 方法。

至于为什么这里的 deps 是一个数组而不是一个变量，是因为可能同一个属性会被多个计算属性所依赖，也就是存在多个 Dep.target 。定义 deps 为数组，若当前属性的setter被触发，就可以批量调用多个计算属性的 onComputedUpdate() 方法了。

完成了这些步骤，基本上我们整个响应式系统就已经搭建完成，下面贴上完整的代码： 

  1. /**
  2.  * 定义一个“依赖收集器”
  3.  */




    

  4. const Dep = {
  5.   target: null
  6. }
  8. /**




    

  9.  * 使一个对象转化成可观测对象
  10.  * @param { Object } obj 对象
  11.  * @param { String } key 对象的key
  12.  * @param { Any } val 对象的某个key的值
  13.  */




    

  14. function defineReactive (obj, key, val) {
  15.   const deps = []
  16.   Object.defineProperty(obj, key, {
  17.     get () {
  18.       console.log(`我的${key}属性被读取了！`)




    

  19.       if (Dep.target && deps.indexOf(Dep.target) === -1) {
  20.         deps.push(Dep.target)
  21.       }
  22.       return val




    

  23.     },
  24.     set (newVal) {
  25.       console.log(`我的${key}属性被修改了！`)
  26.       val = newVal
  27.       deps.forEach((dep) => {




    

  28.         dep()
  29.       })
  30.     }
  31.   })
  32. }




    

  34. /**
  35.  * 把一个对象的每一项都转化成可观测对象
  36.  * @param { Object } obj 对象
  37.  */




    

  38. function observable (obj) {
  39.   const keys = Object.keys(obj)
  40.   for (let i = 0; i < keys.length; i++) {
  41.     defineReactive(obj, keys[i], obj[keys[i]])
  42.   }




    

  43.   return obj
  44. }
  46. /**




    

  47.  * 当计算属性的值被更新时调用
  48.  * @param { Any } val 计算属性的值
  49.  */
  50. function




    
 onComputedUpdate (val) {
  51.   console.log(`我的类型是：${val}`)
  52. }
  54. /**
  55.  * 观测者




    

  56.  * @param { Object } obj 被观测对象
  57.  * @param { String } key 被观测对象的key
  58.  * @param { Function } cb 回调函数，返回“计算属性”的值
  59.  */




    

  60. function watcher (obj, key, cb) {
  61.   // 定义一个被动触发函数，当这个“被观测对象”的依赖更新时调用
  62.   const onDepUpdated = () => {
  63.     




    
const val = cb()
  64.     onComputedUpdate(val)
  65.   }
  67.   




    
Object.defineProperty(obj, key, {
  68.     get () {
  69.       Dep.target = onDepUpdated
  70.       




    
// 执行cb()的过程中会用到Dep.target，
  71.       // 当cb()执行完了就重置Dep.target为null
  72.       const val = cb()
  73.       Dep.target = null
  74.       




    
return val
  75.     },
  76.     set () {
  77.       console.error(




    
'计算属性无法被赋值！')
  78.     }
  79.   })
  80. }
  81. 




    

  82. const hero = observable({
  83.   health: 3000,
  84.   IQ: 150
  85. })




    

  87. watcher(hero, 'type', () => {
  88.   




    
return hero.health > 4000 ? '坦克' : '脆皮'
  89. })
  91. console.log(`英雄初始类型：${hero.type}`)




    

  93. hero.health = 5000
  94. 




    

  95. // -> 我的health属性被读取了！
  96. // -> 英雄初始类型：脆皮
  97. // -> 我的health属性被修改了！




    

  98. // -> 我的health属性被读取了！
  99. // -> 我的类型是：坦克

上述代码可以直接在code pen或者浏览器控制台上执行。

四、代码优化

在上面的例子中，依赖收集器只是一个简单的对象，其实在 defineReactive() 内部的 deps 数组等和依赖收集有关的功能，都应该集成在 Dep 实例当中，所以我们可以把依赖收集器改写一下： 

  1. class




    
 Dep {
  2.   constructor () {
  3.     




    
this.deps = []
  4.   }
  6.   depend () {






请到「今天看啥」查看全文


推荐文章
程序员小灰  ·  小灰筹划6年的“仓鼠币系统”，终于上线了！
2 天前
OSC开源社区  ·  Bun 1.2.3带来全新Glob实现——引领性能突破
2 天前
程序猿  ·  41岁DeepMind天才科学家去世：长期受抑郁困扰、曾诉AI工作压力太大、为利润而工作
3 天前
程序员的那些事  ·  OpenAI 奥特曼官宣早产儿！双父生子背后的科技狂人与程序员爱情。网友：人类首个“AGI宝宝”？
3 天前
程序员的那些事  ·  印度把 DeepSeek 告上法庭！三哥的“既要又要”病又犯了？
4 天前
廣告狂人  ·  《长城》这一小步，将是中国电影工业的一大步
8 年前
知道学舍  ·  这三件事很重要，但很多父母却从不教孩子：吃饭、吃苦、吃亏！
8 年前
狗与爱的世界  ·  三只柴柴等吃饭，白色的那只特别激动，你根本就是个弹簧嘛！
7 年前
早安晚安心语  ·  年少不听李宗盛，听懂已是不惑年
7 年前
云头条  ·  融合 CDN 服务商星云（PeerStar）完成 Pre-A 轮融资
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!