vue中响应式的步骤

1. 对一个对象的所有字段进行监听。get ：当字段读取时做的操作，set：当对象设置时做的操作

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

2. 当字段 obj 在模板中 {{ obj + 1 }} 这样渲染，或者在 computed 中 let x = obj + 1 这样读取，或者在 method 中 let m = obj + 2 这样操作时，就当作读取了，那么就会触发 obj 的 get 监听，就会执行 get 中的 track 函数

3. 对于上面的 computed 和 method 中的函数调用时，都将这个 obj 字段所处的函数赋值给当前活动的副作用变量，然后执行这个函数。等到读取到 obj 的时候，会检查当前是否有活动的副作用，有的话，把当前活动的副作用添加到 obj 对应的集合中（每个字段都有一个保存副作用的集合）。这样，每有一个 obj 被读取，就将 obj 所处的函数（因为读取到 obj 的时候，就是在运行这个函数的时候）添加到 obj 对应的集合中。这就形成了 obj 到副作用函数集合的映射，也就找到了 obj 关联的所有函数。

function track(target, key) {
  if (!activeEffect) return
  let depsMap = bucket.get(target) // key --> effects
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map())) // 新建Map与target相连
  }
  let deps = depsMap.get(key)
  if (!deps) {
    depsMap.set(key, (deps = new Set())) // 新建Set与key相连
  }
//   console.log(deps)
//   console.log(bucket)
  deps.add(activeEffect)
}

4. 这时候 obj 是发布者，它关联的所有副作用函数都是它的订阅者，一旦 obj 发生改变，都会执行它所关联的所有副作用函数。

5. 当 obj 发生改变，如 obj = 1 时，会触发 trigger 操作，会将 obj 的所有辅助用函数用映射中拿出来，然后执行

function trigger(target, key) {
    const depsMap = bucket.get(target)
    //   console.log(depsMap)
    if (!depsMap) return
    // 根据key取得所有辅助用函数
    const effects = depsMap.get(key)
    effects && effects.forEach(fn => fn())
}