vue3的reactive源码解析

reactive源码解析

总结一句: reactive是个函数。reactive函数返回了一个createReactiveObject函数,createReactiveObject又返回了一个“经new Proxy实例化”的对象。
详细介绍: 我们使用时传给reactive函数一个对象类型target,reactive又将target传给createReactiveObject函数做为第一个参数,createReactiveObject接收三个参数,第一个是taget,第二个是mutableHandlers,第三个是reactiveMap,最后对target使用proxy实例化,并将实例化的对象返回。其中mutableHandlers是一个对象,里面有get set函数用于收集依赖和触发依赖,reactiveMap是一个经过new WeakMap的实例化容器,用于收集响应式数据。

  • mutableHandlers里有get set函数
    1、get函数内部除了使用Reflect.get来获取值并返回外,还使用track函数进行收集依赖。track函数是如何收集依赖的呢?实例化一个全局WeakMap变量targetMap,当成所有响应式数据的收集依赖容器,把数据本身target当成targetMap的key,实例化一个Map作为值取名depsMap,而depsMap内把数据内的属性做为key,实例化一个Set取名为dep作为值,而dep内存着这个数据对应属性对应的所有依赖。
    2、set函数内部除了使用Reflect.set设置值并返回外,还使用trigger函数触发依赖。trigger是怎么触发依赖的呢?首先先从全局变量依赖容器targetMap中根据本身数据taget获取数据取名depsMap,如果没有depsMap直接结束函数,有depsMap再从depsMap里根据对应的属性获取出dep,如果没有dep就结束函数,有dep就遍历里面的所有元素并调用run()函数重新触发里面的所有依赖。
  • reactiveMap是使用new WeakMap出来的收集所有响应式数据的全局变量容器
    1、当数据将要new proxy前,需要根据数据target从容器reactiveMap中获取数据来判断该数据是不是已经被响应式过了,能获取到说明已经响应式过则直接返回即可,没有获取到使用new proxy响应式数据,并把响应式过的数据存在reactiveMap容器中。
  1. 为什么reactive只能对复杂类型进行响应式?
    因为reactive内部使用的是proxy,而proxy只能接收复杂类型,不能接收简单类型。
  2. 为什么reactive内部的set get函数 需要调用Reflect.get Reflect.set呢?
    因为有时候我们代码的this并不是指向proxy,这样都导致set get内触发不正确,而Reflect.get Reflect.set的第三个参数可以让this直接指向proxy

你可能感兴趣的:(vue3源码,vue.js,前端,javascript)