vue3响应式--proxy

vue3.0快发布了，也带来了很多新的特性，如新的监测设计，PWA，TS支持等，本节一起了解下新的监测原理。

旧的响应式原理

vue2利用Object.defineProperty来劫持data数据的getter和setter操作。这使得data在被访问或赋值时，动态更新绑定的template模块。

对象：会递归得去循环vue得每一个属性，（这也是浪费性能的地方）会给每个属性增加getter和setter，当属性发生变化的时候会更新视图。

数组：重写了数组的方法，当调用数组方法时会触发更新，也会对数组中的每一项进行监控。

缺点：对象只监控自带的属性，新增的属性不监控，也就不生效。若是后续需要这个自带属性，就要再初始化的时候给它一个undefined值，后续再改这个值

数组的索引发生变化或者数组的长度发生变化不会触发实体更新。可以监控引用数组中引用类型值，若是一个普通值并不会监控，例如：[1, 2, {a: 3}] ,只能监控a

Proxy消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的这些限制：无法监听属性的添加和删除、数组索引和长度的变更，并可以支持 Map、Set、WeakMap 和 WeakSet！

Proxy及使用

MDN 上是这么描述的——Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的~

一个例子：

let obj = {
    name:{name:'hhh'},
    arr: ['吃','喝','玩']
}
//proxy兼容性差 可以代理13种方法 get set
//defineProperty 只对特定 的属性进行拦截 
let handler = {
    get (target,key) { //target就是obj key就是要取obj里面的哪个属性
        console.log('收集依赖')
        return target[key]
    },
    set (target,key,value) {
        console.log('触发更新')
        target[key] = value
    }
}

let proxy = new Proxy(obj,handler)
//通过代理后的对象取值和设置值
proxy.arr   //收集依赖
proxy.name = '123'  //触发更新

定义了一个对象obj，通过代理后的对象（上面的proxy）来操作原对象。当取值的时候会走get方法，返回对应的值，当设置值的时候会走set方法，触发更新。

但这是老的写法，新的写法是使用Reflect。

Reflect是内置对象，为操作对象而提供的新API，将Object对象的属于语言内部的方法放到Reflect对象上，即从Reflect对象上拿Object对象内部方法。如果出错将返回false

简单改写上面这个例子:

let handler = {
    get (target,key) { //target就是obj key就是要取obj里面的哪个属性
        console.log('收集依赖')
        // return target[key]
        //Reflect 反射 这个方法里面包含了很多api
        return Reflect.get(target,key)
    },
    set (target,key,value) {
        console.log('触发更新')
        // target[key] = value //这种写法设置时如果不成功也不会报错 比如这个对象默认不可配置
        Reflect.set(target,key,value)
    }
}

let proxy = new Proxy(obj,handler)
//通过代理后的对象取值和设置值
proxy.arr  //收集依赖
proxy.name.name //收集依赖(只有一个)
proxy.name = '123' //触发更新

效果依旧和上面一样。

但是有一个问题，这个对象是多层对象，它并不会取到里面的那个name的值。

这是因为之前Object.defineProperty方法是一开始就会对这个多层对象进行递归处理，所以可以拿到，而Proxy不会。它是懒代理。如果对这个对象里面的值进行代理就取不到值。就像上面我们只对name进行了代理，但并没有对name.name进行代理，所以他就取不到这个值，需要代理之后才能取到。

改进如下：

let obj = {
    name:{name:'hhh'},
    arr: ['吃','喝','玩']
}
//proxy兼容性差 可以代理13种方法 get set
//defineProperty 只对特定 的属性进行拦截 

let handler = {
    get (target,key) { //target就是obj key就是要取obj里面的哪个属性
        console.log('收集依赖')
        if(typeof target[key] === 'object' && target[key] !== null){
            //递归代理，只有取到对应值的时候才会代理
            return new Proxy(target[key],handler)
        }
        
        // return target[key]
        //Reflect 反射 这个方法里面包含了很多api
        return Reflect.get(target,key)
    },
    set (target,key,value) {
        console.log('触发更新')
        // target[key] = value //这种写法设置时如果不成功也不会报错 比如这个对象默认不可配置
        Reflect.set(target,key,value)
    }
}

let proxy = new Proxy(obj,handler)
proxy.arr  //收集依赖
proxy.name.name //收集依赖(2个)

接下来看看数组的代理过程：

let obj = {
    name:{name:'hhh'},
    arr: ['吃','喝','玩']
}
//proxy兼容性差 可以代理13种方法 get set
//defineProperty 只对特定 的属性进行拦截 

let handler = {
    get (target,key) { //target就是obj key就是要取obj里面的哪个属性
        console.log('收集依赖')
        if(typeof target[key] === 'object' && target[key] !== null){
            //递归代理，只有取到对应值的时候才会代理
            return new Proxy(target[key],handler)
        }
        
        // return target[key]
        //Reflect 反射 这个方法里面包含了很多api
        return Reflect.get(target,key)
    },
    set (target,key,value) {
        console.log('触发更新')
        // target[key] = value //这种写法设置时如果不成功也不会报错 比如这个对象默认不可配置
        return Reflect.set(target,key,value)
    }
}

let proxy = new Proxy(obj,handler)
//通过代理后的对象取值和设置值
// proxy.name.name = '123' //设置值，取一次，设置一次
proxy.arr.push(456)
//输出
收集依赖 (proxy.arr)
收集依赖 (proxy.arr.push)
收集依赖 (proxy.arr.length)
触发更新 写入新值
触发更新 长度改变
proxy.arr[0]=456
//输出
收集依赖 (proxy.arr)
触发更新 写入新值

这里面它会走两次触发更新的操作，因为第一次需要修改数组的长度，第二次再把元素放进数组里。所以我们需要判断一下它是新增操作还是修改操作

判断新旧属性:

set (target,key,value) {
        let oldValue = target[key]
        console.log(key, oldValue, value)
        if(!oldValue){
            console.log('新增属性')
        }else if(oldValue !== value){
            console.log('修改属性')
        }
        return Reflect.set(target,key,value)
    }

首先拿到它的旧值，如果这个值不存在就是新增，如果存在但不相等就是修改操作

vue3的响应式设计

Vue 3.0 的想法是引入灵感来自于 React Hook 的 Function-based API，作为主要的组件声明方式。

意思就是所有组件的初始状态、computed、watch、methods 都要在一个叫做 setup 的方法中定义，抛弃（暂时会继续兼容）原有的基于对象的组件声明方式。

组件装载
vue3.0用effect副作用钩子来代替vue2.0watcher。我们都知道在vue2.0中，有渲染watcher专门负责数据变化后的从新渲染视图。vue3.0改用effect来代替watcher达到同样的效果。

先简单介绍一下mountComponent流程，后面的文章会详细介绍mount阶段的

// 初始化组件
  const mountComponent: MountComponentFn = (
    ...
  ) => {
    /* 第一步: 创建component 实例   */
    const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance(
      ...
    ))

    /* 第二步 ： TODO:初始化 初始化组件,建立proxy , 根据字符窜模版得到 */
    setupComponent(instance)
    /* 第三步：建立一个渲染effect，执行effect */
    setupRenderEffect(
      instance,     // 组件实例
      initialVNode, //vnode  
      container,    // 容器元素
      ...
    )   
  }

整个mountComponent的主要分为了三步，我们这里分别介绍一下每个步骤干了什么：

① 第一步: 创建component 实例。
② 第二步：初始化组件,建立proxy ,根据字符窜模版得到render函数。生命周期钩子函数处理等等
③ 第三步：建立一个渲染effect，执行effect。
从如上方法中我们可以看到，在setupComponent已经构建了响应式对象，但是还没有初始化收集依赖。

setupRenderEffect 构建渲染effect

const setupRenderEffect: SetupRenderEffectFn = (
   ...
  ) => {
    /* 创建一个渲染 effect */
    instance.update = effect(function componentEffect() {
      //...省去的内容后面会讲到
    },{ scheduler: queueJob })
  }

setupRenderEffect的作用
① 创建一个effect，并把它赋值给组件实例的update方法，作为渲染更新视图用。
② componentEffect作为回调函数形式传递给effect作为第一个参数

effect做了些什么

export function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  const effect = createReactiveEffect(fn, options)
  /* 如果不是懒加载 立即执行 effect函数 */
  if (!options.lazy) {
    effect()
  }
  return effect
}

effect作用如下
① 首先调用。createReactiveEffect.
② 如果不是懒加载立即执行由createReactiveEffect创建出来的ReactiveEffect函数。

接着看createReactiveEffect(这就是vue2.x中的Watcher)

function createReactiveEffect<T = any>(
  fn: (...args: any[]) => T, /**回调函数 */
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(...args: unknown[]): unknown {
    try {
        enableTracking()
        effectStack.push(effect) //往effect数组中里放入当前 effect
        activeEffect = effect //TODO: effect 赋值给当前的 activeEffect
        return fn(...args) //TODO:    fn 为effect传进来 componentEffect
      } finally {
        effectStack.pop() //完成依赖收集后从effect数组删掉这个 effect
        resetTracking() 
        /* 将activeEffect还原到之前的effect */
        activeEffect = effectStack[effectStack.length - 1]
    }
  } as ReactiveEffect
  /* 配置一下初始化参数 */
  effect.id = uid++
  effect._isEffect = true
  effect.active = true
  effect.raw = fn
  effect.deps = [] /* TODO:用于收集相关依赖 */
  effect.options = options
  return effect
}

createReactiveEffect的作用主要是配置了一些初始化的参数，然后包装了之前传进来的fn重要的一点是把当前的effect赋值给了activeEffect,这一点非常重要，和收集依赖有着直接的关系.
整个响应式初始化阶段进行总结
① setupComponent创建组件，调用composition-api,处理options（构建响应式）得到Observer对象。
② 创建一个渲染effect，里面包装了真正的渲染方法componentEffect，添加一些effect初始化属性。
③ 然后立即执行effect，然后将当前渲染effect赋值给activeEffect

数据响应
vue3新的响应式书写方式（老的也兼容）

setup() {
     const state = {
         count: 0,
         double: computed(() => state.count * 2)
     }
     function increment() {
         state.count++
     }
     
    onMounted(() => {
        console.log(state.count)
    })
    
    watch(() => {
        document.title = `count ${state.count}`
   })
    return {
        state,
      increment
   }
}

感觉setup这块就有点像 react hooks 理解成一个带有数据的逻辑复用模块，不再以vue组件为单位的代码复用了
和React钩子不同，setup()函数仅被调用一次。
所以新的响应书数据两种声明方式：

Ref
前提：声明一个类型 Ref
ref()函数源码：

function ref(raw: unknown) {
   if (isRef(raw)) {
     return raw
   }
   // convert 内容：判断 raw是不是对象，是的话 调用reactive把raw响应化
   raw = convert(raw)
   const r = {
     _isRef: true,
     get value() {
      // track 理解为依赖收集
      track(r, OperationTypes.GET, '')
      return raw
    },
    set value(newVal) {
      raw = convert(newVal)
      // trigger 理解为触发监听，就是触发页面更新好了
      trigger(r, OperationTypes.SET, '')
    }
  }
  return r as Ref
}

上面的convert函数内容为

const convert = val => isObject(val) ? reactive(val) : val

可以看得出 ref类型只会包装最外面一层，内部的对象最终还是调用reactive，生成Proxy对象进行响应式代理。
疑问：可能有人想问，为什么不都用proxy, 内部对象都用proxy,最外层还要搞个 Ref类型，多此一举吗？
理由可能比较简单，那就是proxy代理的都是对象，对于基本数据类型，函数传递或对象结构是，会丢失原始数据的引用。
官方解释：

However, the problem with going reactive-only is that the consumer of a composition function must keep the reference to the returned object at all times in order to retain reactivity. The object cannot be destructured or spread:

Reactive
源码如下：
注：target一定是一个对象，不然会报警告

function reactive(target) {
   // 如果target是一个只读响应式数据
   if (readonlyToRaw.has(target)) {
     return target
   }
   // 如果是被用户标记的只读数据，那通过readonly函数去封装
   if (readonlyValues.has(target)) {
     return readonly(target)
   }
  // go ----> step2
  return createReactiveObject(
    target,
    rawToReactive,
    reactiveToRaw,
    mutableHandlers, // 注意传递
    mutableCollectionHandlers
  )
}

createReactiveObject函数如下：

function createReactiveObject(
   target: unknown,
   toProxy: WeakMap<any, any>,
   toRaw: WeakMap<any, any>,
   baseHandlers: ProxyHandler<any>,
   collectionHandlers: ProxyHandler<any>
 ) {
     // 判断target不是对象就 警告 并退出
   if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // 通过原始数据 -> 响应数据的映射，获取响应数据
  let observed = toProxy.get(target)
  if (observed !== void 0) {
    return observed
  }
  // 如果原始数据本身就是个响应数据了，直接返回自身
  if (toRaw.has(target)) {
    return target
  }
  // 如果是不可观察的对象，则直接返回原对象
  if (!canObserve(target)) {
    return target
  }
  // 集合数据与(对象/数组) 两种数据的代理处理方式不同
  const handlers = collectionTypes.has(target.constructor)
    ? collectionHandlers
    : baseHandlers
  // 声明一个代理对象 ----> step3
  observed = new Proxy(target, handlers)
  // 两个weakMap 存target observed
  toProxy.set(target, observed)
  toRaw.set(observed, target)
  if (!targetMap.has(target)) {
    targetMap.set(target, new Map())
  }
  return observed
}

通过上面源码创建proxy对象的大致流程是这样的：

①首先判断目标对象有没有被proxy响应式代理过，如果是那么直接返回对象。

②然后通过判断目标对象是否是[ Set, Map, WeakMap, WeakSet ]数据类型来选择是用collectionHandlers ，还是baseHandlers->就是reactive传进来的mutableHandlers作为proxy的hander对象。

③最后通过真正使用new proxy来创建一个observed ，然后通过rawToReactive reactiveToRaw 保存 target和observed键值对。

拦截器
在baseHandles基类处理对象中可以看到对set/get的拦截处理
(我们以对象类型为例，集合类型的handlers稍复杂点)
handlers如下，new Proxy(target, handles)的 handles就是下面这个对象

export const mutableHandlers = {
  get: createGetter(false),
  set,
  deleteProperty,
  has,
  ownKeys
}

依赖收集
打开createGetter(false)看实现思路如下：
思路：当我们代理get获取到res时，判断res 是否是对象，如果是那么继续reactive(res)，可以说是一个递归

reactive(target) ->
createReactiveObject(target,handlers) ->
new Proxy(target, handlers) ->
createGetter(readonly) ->
get() -> res ->
isObject(res) ? reactive(res) : res

function createGetter(isReadonly: boolean) {
   // isReadonly 用来区分是否是只读响应式数据
   // receiver即是被创建出来的代理对象
   return function get(target: object, key: string | symbol, receiver: object) {
     // 获取原始数据的响应值
     const res = Reflect.get(target, key, receiver)
     if (isSymbol(key) && builtInSymbols.has(key)) {
       return res
     }
    if (isRef(res)) {
      return res.value
    }
    // 收集依赖
    track(target, OperationTypes.GET, key)
    // 这里判断上面获取的res 是否是对象，如果是对象 则调用reactive并且传递的是获取到的res，
    // 则形成了递归
    return isObject(res)
      ? isReadonly
        ? // need to lazy access readonly and reactive here to avoid
          // circular dependency
          readonly(res)
        : reactive(res)
      : res
  }
}

在vue2.0的时候。响应式是在初始化的时候就深层次递归处理了

但是与vue2.0不同的是,即便是深度响应式我们也只能在获取上一级get之后才能触发下一级的深度响应式。

这样做好处是:

初始化的时候不用递归去处理对象，造成了不必要的性能开销。
有一些没有用上的state，这里就不需要在深层次响应式处理。

先来看看track源码：

/* target 对象本身 ，key属性值  type 为 'GET' */
export function track(target: object, type: TrackOpTypes, key: unknown) {
  /* 当打印或者获取属性的时候 console.log(this.a) 是没有activeEffect的 当前返回值为0  */
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    /*  target -map-> depsMap  */
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    /* key : dep dep观察者 */
    depsMap.set(key, (dep = new Set()))
  }
   /* 当前activeEffect */
  if (!dep.has(activeEffect)) {
    /* dep添加 activeEffect */
    dep.add(activeEffect)
    /* 每个 activeEffect的deps 存放当前的dep */
    activeEffect.deps.push(dep)
  }
}

里面主要引入了两个概念 targetMap和 depsMap
track作用大致是，首先根据 proxy对象，获取存放deps的depsMap，然后通过访问的属性名key获取对应的dep,然后将当前激活的effect存入当前dep收集依赖。

主要作用
①找到与当前proxy 和 key对应的dep。
②dep与当前activeEffect建立联系，收集依赖。

为了方便理解，targetMap 和 depsMap的关系，下面我们用一个例子来说明：

例子：

<div id="app" >
  <span>{{ state.a }}</span>
  <span>{{ state.b }}</span>
<div>
<script>
const { createApp, reactive } = Vue

/* 子组件 */
const Children ={
    template="<div> <span>{{ state.c }}</span> </div>",
    setup(){
       const state = reactive({
          c:1
       })
       return {
           state
       }
    }
}
/* 父组件 */
createApp({
   component:{
       Children
   } 
   setup(){
       const state = reactive({
           a:1,
           b:2
       })
       return {
           state
       }
   }
})mount('#app')

渲染effect函数如何触发get
前面说过，创建一个渲染renderEffect，然后把赋值给activeEffect，最后执行renderEffect ，在这个期间是怎么做依赖收集的呢，让我们一起来看看,update函数中做了什么，我们回到之前讲的componentEffect逻辑上来

function componentEffect() {
    if (!instance.isMounted) {
        let vnodeHook: VNodeHook | null | undefined
        const { el, props } = initialVNode
        const { bm, m, a, parent } = instance
        /* TODO: 触发instance.render函数，形成树结构 */
        const subTree = (instance.subTree = renderComponentRoot(instance))
        if (bm) {
          //触发 beforeMount声明周期钩子
          invokeArrayFns(bm)
        }
        patch(
            null,
            subTree,
            container,
            anchor,
            instance,
            parentSuspense,
            isSVG
        )
        /* 触发声明周期 mounted钩子 */
        if (m) {
          queuePostRenderEffect(m, parentSuspense)
        }
        instance.isMounted = true
      } else {
        // 更新组件逻辑
        // ......
      }
}

代码大致首先会通过renderComponentRoot方法形成树结构，这里要注意的是，我们在最初mountComponent的setupComponent方法中，已经通过编译方法compile编译了template模版的内容，state.a state.b等抽象语法树，最终返回的render函数在这个阶段会被触发，在render函数中在模版中的表达式 state.a state.b 点语法会被替换成data中真实的属性，这时候就进行了真正的依赖收集，触发了get方法。接下来就是触发生命周期 beforeMount ,然后对整个树结构重新patch,patch完毕后，调用mounted钩子.

依赖收集流程总结
① 首先执行renderEffect ，赋值给activeEffect ，调用renderComponentRoot方法，然后触发render函数。
② 根据render函数，解析经过compile，语法树处理过后的模版表达式，访问真实的data属性，触发get。
③ get方法首先经过之前不同的reactive，通过track方法进行依赖收集。
④ track方法通过当前proxy对象target,和访问的属性名key来找到对应的dep。
⑤ 将dep与当前的activeEffect建立起联系。将activeEffect压入dep数组中，（此时的dep中已经含有当前组件的渲染effect,这就是响应式的根本原因）如果我们触发set，就能在数组中找到对应的effect，依次执行。

set 派发更新
set的一个主要作用去触发监听，使试图更新，需要注意的是控制什么时候才是视图需要真的更新

function set(
   target: object,
   key: string | symbol,
   value: unknown,
   receiver: object
 ): boolean {
   // 拿到新值的原始数据
   value = toRaw(value)
   // 获取旧值
  const oldValue = (target as any)[key]
  // 如果旧值是Ref类型，新值不是，那么直接更新值，并返回
  if (isRef(oldValue) && !isRef(value)) {
    oldValue.value = value
    return true
  }
  const hadKey = hasOwn(target, key)
  const result = Reflect.set(target, key, value, receiver)
  // 如果是原始数据原型链上的数据操作，不做任何触发监听函数的行为。
  if (target === toRaw(receiver)) {
    // 更新的两种条件 
    // 1. 不存在key，即当前操作是在新增属性
    // 2. 旧值和新值不等
    if (!hadKey) {
      trigger(target, OperationTypes.ADD, key)
    } else if (hasChanged(value, oldValue)) {
      trigger(target, OperationTypes.SET, key)
    }
  }
  return result
}

疑问：对于数据的set操作会出发多次traps?
这里有个前提了解：就是我们日常修改数组，比如 let a = [1]， a.push(2),
这个push操作，我们是实际上是对a做了2个属性的修改，1，set length 1； 2. set value 2
所以我们的set traps会出发多次
思路：通过属性值和value控制，比如当 set key是 length的时候，我们可以判断当前数组已经有此属性，所以不需要出发更新，当新设置的值和老值一样是也不需要更新。

疑问：set的源码里面有有一个 target === toRaw(receiver)条件下才继续操作 trigger更新视图？
这里就暴露出一个东西，即存在 target !== toRaw(receiver)
Receiver: 最初被调用的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上或以其他方式被间接地调用（因此不一定是 proxy 本身）

其实源码有注释

// don’t trigger if target is something up in the prototype chain of original

即如果我们的操作是操作原始数据原型链上的数据操作，target 就不等于 toRaw(receiver)
什么情况下 target !== toRaw(receiver)
例如：

const child = new Proxy(
   {},
   { // 其他 traps 省略
     set(target, key, value, receiver) {
       Reflect.set(target, key, value, receiver)
       console.log('child', receiver)
       return true
     }
   }
)

const parent = new Proxy(
  { a: 10 },
  { // 其他 traps 省略
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver)
      console.log('parent', receiver)
      return true
    }
  }
)

Object.setPrototypeOf(child, parent) // child.__proto__ === parent true

child.a = 4

// 结果
// parent Proxy {a: 4}
// Proxy {a: 4}

从结果可以看出，理论上 parent的set应该不会触发，但实际是触发了，此时

target: {a: 10}
receiver: Proxy {a: 4}
// 在vue3中
toRaw(receiver): {a: 4}

set的流程大致是这样的
① 首先通过toRaw判断当前的proxy对象和建立响应式存入reactiveToRaw的proxy对象是否相等。

② 判断target有没有当前key,如果存在的话，改变属性，执行trigger(target, TriggerOpTypes.SET, key, value, oldValue)。

③ 如果当前key不存在，说明是赋值新属性，执行trigger(target, TriggerOpTypes.ADD, key, value)

接着看下trigger

/* 根据value值的改变，从effect和computer拿出对应的callback ，然后依次执行 */
export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  /* 获取depssMap */
  const depsMap = targetMap.get(target)
  /* 没有经过依赖收集的 ，直接返回 */
  if (!depsMap) {
    return
  }
  const effects = new Set<ReactiveEffect>()        /* effect钩子队列 */
  const computedRunners = new Set<ReactiveEffect>() /* 计算属性队列 */
  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
    if (effectsToAdd) {
      effectsToAdd.forEach(effect => {
        if (effect !== activeEffect || !shouldTrack) {
          if (effect.options.computed) { /* 处理computed逻辑 */
            computedRunners.add(effect)  /* 储存对应的dep */
          } else {
            effects.add(effect)  /* 储存对应的dep */
          }
        }
      })
    }
  }

  add(depsMap.get(key))

  const run = (effect: ReactiveEffect) => {
    if (effect.options.scheduler) { /* 放进 scheduler 调度*/
      effect.options.scheduler(effect)
    } else {
      effect() /* 不存在调度情况，直接执行effect */
    }
  }

  //TODO: 必须首先运行计算属性的更新，以便计算的getter
  //在任何依赖于它们的正常更新effect运行之前，都可能失效。

  computedRunners.forEach(run) /* 依次执行computedRunners 回调*/
  effects.forEach(run) /* 依次执行 effect 回调（ TODO: 里面包括渲染effect ）*/
}

trigger的核心逻辑

① 首先从targetMap中，根据当前proxy找到与之对应的depsMap。

② 根据key找到depsMap中对应的deps，然后通过add方法分离出对应的effect回调函数和computed回调函数。

③ 依次执行computedRunners 和 effects 队列里面的回调函数，如果发现需要调度处理,放进scheduler事件调度