关于VUE3响应式的原理

关于VUE3响应式的原理

    const targetMap = new WeakMap()
    let activeEffect = null
    //用于记录响应式字段
    function track(target, key) {
      if (activeEffect) {
        let depsMap = targetMap.get(target)
        if (!depsMap) {
          targetMap.set(target, (depsMap = new Map()))
        }
        let dep = depsMap.get(key)
        if (!dep) {
          depsMap.set(key, (dep = new Set()))
        }
        dep.add(activeEffect)
      }
    }
    //用于触发响应式事件
    function trigger(target, key) {
      const depsMap = targetMap.get(target)
      if (!depsMap) return
      let dep = depsMap.get(key)
      if (dep) {
        dep.forEach(effectFn => effectFn())
      }
    }
    function reactive(target) {
      const handler = {
        get(target, key, receiver) {
          console.log("get was called with key:" + key)
          let result = Reflect.get(target, key, receiver)
          track(target, key)
          return result
        },
        set(target, key, value, receiver) {
          console.log("set was called with key:" + key + "value:" + value)
          let oldValue = target[key]
          if (oldValue != value) {
            Reflect.set(target, key, value, receiver)
            trigger(target, key)
          }
          return value
        }
      }
      return new Proxy(target, handler)
    }
    function ref(raw) {
      const r = {
        get value() {
          track(r, "value")
          return raw
        },
        set value(newValue) {
          if (raw !== newValue) {
            raw = newValue
            trigger(r, "value")
          }
        }
      }
      return r
    }
    function effect(fn) {
      activeEffect = fn
      activeEffect()
      activeEffect = null
    }
    let product = reactive({ price: 5, quantity: 10 })
    let salePrice = ref(0)
    let total = 0
    effect(() => salePrice.value = product.price * 0.9)
    effect(() => total = salePrice.value * product.quantity)

1.WeakMap的key是effect函数中存在的reactive和ref对象，WeakMap的value是map类型；map的key是该对象中具体引用过的字段名，map的value是Set类型；Set中存放了包含该字段的effect函数。
2.当product.price被读取时，触发reactive中的get，从而通过Reflect.get获取参数值，然后执行track方法，当首次读取时（即effect执行），activeEffect被赋值为当前effect，会执行track方法中的步骤，将该字段及相关方法写入1中相应的位置。（当以后再读写该对象时，因为不会执行effect函数，所以activeEffect为null，会跳过track中的判断）。
3.当product.price被修改时，触发reactive中的set，当新值与旧值不一样时，通过Reflect.set进行赋值，同时执行trigger，对与该字段有关的effect进行更新。