vue3是通过Proxy来拦截对数据的操作，实现响应式的。

    1. 为什么执行副作用函数前要有清除操作（cleanup）?
    2. 为什么加了清除上一次的依赖关系操作后 effects.forEach(fn => fn())会变成死循环
    3. 为什么要支持嵌套effect？
    4. 在注册副作用函数中既读取属性值，又设置属性值时，会发生堆栈溢出？
    1. let activeEffect = null
    3. // 副作用函数存储栈，保留外层副作用函数，解决问题3
    4. let effectStack = []
    6. // 存储收集到的响应式数据
    7. // Map{target: Map{key: Set[...effects]}}
    8. const bucket = new WeakMap() 
    10. const data = {
    11.   text: 'Hello world!',
    12.   ok: true
    13. }
    15. let dataProxy = new Proxy(data, {
    16.   get(target, key){
    17.     track(target, key)
    18.     return target[key]
    19.   },
    20.   set(target, key, newValue){
    21.     target[key] = newValue
    22.     trigger(target, key)
    23.   }
    24. })
    26. effect(() => {
    27.   document.body.innerHTML = dataProxy.ok ? dataProxy.text : 'not'
    28. })
    30. dataProxy.ok = false
    32. // 此方法是为了清除当前副作用函数之前执行时收集到的依赖，解决问题1
    33. // 例如此例中，当 dataProxy.ok 为 false 时，dataProxy.text将不会再被读取，
    34. // 也就是说之后修改text不应该再触发 dataProxy 的 set 去执行副作用函数
    35. function cleanup(effectFn){
    36.   effectFn.deps.forEach(deps => deps.delete(effectFn))
    37.   effectFn.deps.length = 0
    38. }
    40. // 注册副作用函数
    41. function effect(fn){
    42.   const effectFn = () => {
    43.     cleanup(effectFn)
    44.     activeEffect = effectFn
    45.     effectStack.push(effectFn)
    46.     fn()
    47.     effectStack.pop()
    48.     activeEffect = effectStack[effectStack.length - 1]
    49.   }
    50.   effectFn.deps = []
    51.   effectFn()
    52. }
    54. function track(target, key){
    55.   if(!activeEffect) return
    56.   let depsMap = bucket.get(target)
    57.   if(!depsMap){
    58.     bucket.set(target, depsMap = new Map())
    59.   }
    60.   let deps = depsMap.get(key)
    61.   if(!deps){
    62.     depsMap.set(key, deps = new Set())
    63.   }
    64.   deps.add(activeEffect)
    65.   activeEffect.deps.push(deps)
    66. }
    68. function trigger(target, key){
    69.   let depsMap = bucket.get(target)
    70.   if(!depsMap) return
    71.   let effects = depsMap.get(key)
    72.   // effects && effects.forEach(fn => fn());
    73.   // 由上面的书写方式改为下面的 解决问题2
    74.   // 原因： 当对dataPorxy的属性（key）进行修改时，trigger执行 => 获取key对应的effects => 
    75.   // effects执行(即effect函数中effectFn执行) => cleanup函数执行 => key对应的effects中的值被删除
    76.   // effect函数传入的fn执行 => dataPorxy的属性get触发 => key对应的effects中的值又被添加
    77.   // 从上述过程可以看出： 获取key对应的effects 中的值被删除又重新添加，导致死循环
    78.   // 见规范： https://262.ecma-international.org/6.0/#sec-set.prototype.foreach
    79.   // 规范内容：每个值通常只被访问一次。但是，如果一个值在被访问后被删除，然后在调用完成之前被重新添加，则该值将被重新访问。
    80.   // 例子： 
    81.   // const set = new Set([1])
    82.   // set.forEach(item => {
    83.   //   set.delete(1)
    84.   //   set.add(1)
    85.   //   console.log('执行中')
    86.   // })
    87.   let effectToRun = new Set()
    88.   effects && effects.forEach(effect => {
    89.     // 解决问题4，避免副作用函数递归调用，栈溢出
    90.     // 原因：当副作用函数中读取值后副作用函数会执行，在执行过程中 又设置了该属性值，
    91.     // 便触发trigger函数执行，在trigger中又执行副作用函数，如此递归导致爆栈
    92.     // 解决：当当前执行的副作用函数是 effect时，就不再执行了
    93.     if(effect !== activeEffect) effectToRun.add(effect)
    94.   });
    95.   effectToRun.forEach(fn => fn());
    96. }