《Vue进阶教程》第十四课：改进桶布局

 往期内容：

《Vue进阶教程》第三课：Vue相应式原理
《Vue进阶教程》第四课：reactive()函数详解
《Vue进阶教程》第五课：ref()函数详解(重点)
《Vue进阶教程》第六课：computed()函数详解(上)
《Vue进阶教程》第七课：computed()函数详解(下)
《Vue进阶教程》第八课：watch()函数的基本利用
《Vue进阶教程》第九课：watch()函数的高级利用
《Vue进阶教程》第十课：别的函数
《Vue进阶教程》第十一课：相应式系统先容
《Vue进阶教程》第十二课：实现一对多
《Vue进阶教程》第十三课：实现依赖收集
一、改进桶布局

看起来现在可以主动收集依赖. 但是依然解决不了差别的属性对应差别的副作用函数集合这个问题.
因此, 我们需要改进桶布局
将桶改造成一个Map映射表, 差别的属性对应差别的Set集合

示例
reactive.js

1. // 定义一个副作用函数桶, 存放所有的副作用函数. 每个元素都是一个副作用函数
2. const bucket = new Map() // 修改 [name: Set(fn, fn), age: Set(fn, fn)]
4. // 定义一个全局变量, 保存当前正在执行的副作用函数
5. let activeEffect = null
7. function isObject(value) {
8.   return typeof value === 'object' && value !== null
9. }
11. // 收集依赖
12. function track(target, key) {
13.   if (!activeEffect) return
14.   
15.   let depSet = bucket.get(key)
16.   if (!depSet) {
17.     depSet = new Set()
18.     bucket.set(key, depSet)
19.   }
20.   
21.   // 只有activeEffect有值时(保存的副作用函数), 才添加到桶中
22.   depSet.add(activeEffect)
23. }
25. function trigger(target, key) {
26.   // 从副作用函数桶中依次取出每一个元素(副作用函数)执行
27.   let depSet = bucket.get(key)
28.   if (depSet) {
29.     depSet.forEach((fn) => fn())
30.   }
31. }
32. /**
33. * 创建响应式数据
34. *  @param [object]: 普通对象
35. *  @return [Proxy]: 代理对象
36. */
37. function reactive(data) {
38.   if (!isObject(data)) return
39.   
40.   return new Proxy(data, {
41.     get(target, key) {
42.       // 在get操作时, 收集依赖
43.       track(target, key)
44.       
45.       return target[key]
46.     },
47.     set(target, key, value) {
48.       target[key] = value
49.       // 在set操作时, 触发副作用重新执行
50.       trigger(target, key)
51.       return true
52.     },
53.   })
54. }
56. /**
57. * 注册副作用函数
58. *  @param [function]: 需要注册的 副作用函数
59. */
60. function effect(fn) {
61.   if (typeof fn !== 'function') return
62.   
63.   // 记录正在执行的副作用函数
64.   activeEffect = fn
65.   // 调用副作用函数
66.   fn()
67.   // 重置全局变量
68.   activeEffect = null
69. }

复制代码

至此, 我们通过改进桶布局, 可以区分同一个代理对象的差别的属性
二、进一步改进桶布局