辽宁建设工程信息网业绩录入,潍坊网站seo外包,城乡建设官网,全球设计师知识更新服务平台reactive源码解析
总结一句: reactive是个函数。reactive函数返回了一个createReactiveObject函数#xff0c;createReactiveObject又返回了一个“经new Proxy实例化”的对象。 详细介绍: 我们使用时传给reactive函数一个对象类型target#xff0c;reactive又将target传给cr…reactive源码解析
总结一句: reactive是个函数。reactive函数返回了一个createReactiveObject函数createReactiveObject又返回了一个“经new Proxy实例化”的对象。 详细介绍: 我们使用时传给reactive函数一个对象类型targetreactive又将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容器中。
为什么reactive只能对复杂类型进行响应式 因为reactive内部使用的是proxy,而proxy只能接收复杂类型不能接收简单类型。为什么reactive内部的set get函数 需要调用Reflect.get Reflect.set呢 因为有时候我们代码的this并不是指向proxy,这样都导致set get内触发不正确而Reflect.get Reflect.set的第三个参数可以让this直接指向proxy
