网站名称重要吗,免费申请一个微信号,东风南方实业集团 深圳vi设计公司,网站做302跳转的意义前言
用了很长时间的 componsition-api 了#xff0c;最近想看看源码#xff0c;抱着单纯的学习心态先从 reactive 开始吧。
个人习惯#xff1a;
看代码要带着问题去看#xff0c;不要盲目的去看问题就是这次看源码的主线#xff0c;要围绕着主线去展开#xff0c;过…前言
用了很长时间的 componsition-api 了最近想看看源码抱着单纯的学习心态先从 reactive 开始吧。
个人习惯
看代码要带着问题去看不要盲目的去看问题就是这次看源码的主线要围绕着主线去展开过程中和主线没有多大关系的该忽略掉就忽略掉开源项目一般都封装的比较好有可能一个函数中会引用多个文件中的函数每次跳转的时候将跳转的目录记下来避免跳着跳着就不知道跳哪去了进入到一个文件中先将函数都收起来便于查看
前置准备 把 vue-next 从 github 上把项目 clone 下来。 通过 yarn install 安装依赖。 将 package.json 中 dev 脚本增加 sourcemap 最终命令为: dev: node scripts/dev.js --sourcemap。 因为 vue3 是通过 rollup 打包的所以还需要安装 rollup。 执行 npm run dev 在 package/vue/ 目录下会生成一个 dist 文件夹。 在 package/vue/examples/ 目录下新建 init.html 文件。 !DOCTYPE html
html langen
bodydiv idapph1hello/h1/divscript src../dist/vue.global.js/scriptscriptconst { watch, watchEffect, createApp, reactive } Vuedebuggerconst data reactive({a: 1,b: 2,count: 0})/script
/body
/html然后将这个文件以服务的形式跑起来进入 debug通过断点可以进入到 reactive 函数。
数据响应式 Reactive
reactive 函数一开始就判断了如果传入的 target 如果是一个只读的对象则 return target。
紧接着调用了 createReactiveObject 函数先来看一下函数对应的参数
target 将要被代理的对象是否只读baseHandlers 和 collectionHandlers 都是 proxy 的 handler对应的实参分别是 mutableHandlers 和 mutableCollectionHandlers根据 target 类型来决定 proxy 的 handlerreactiveMap 是当前文件中声明的一个常量用于存储依赖现在只需要它是一个 weakMap 类型数据就好
函数一开始对 target 做了几种情况的判断针对不同情况做了对应的 return。
主要关注点是这一段代码
const proxy new Proxy(target,targetType TargetType.COLLECTION ? collectionHandlers : baseHandlers
)这里会根据 target 的类型来选择对应的 handlertargetType 是调用 getTargetType 函数的返回值targetType 为 Map/Set/WeakMap/WeakSet 的时候会将 collectionHandlers 传入 Proxy反之采用 baseHandlers。
baseHandlers
baseHandlers 对应的 mutableHandlers
get
get 对应的 createGetter 的返回值
createGetter 接收两个参数 isReadonly 和 shallow在 get 方法中先判断了三种特殊情况针对每种不同情况 return 了不同的值其中在这几个判断中用到的 shallowReadonlyMap/readonlyMap/shallowReactiveMap 它们的类型和 reactiveMap 的类型都一样都是 weakMap只不过是对应不同的状态。
下边判断了是不是数组如果是数组并且 isReadonly 为 false 且 key 是 includes/indexOf/lastIndexOf/push/pop/shift/unshift/splice 其中的一个的话则执行
return Reflect.get(arrayInstrumentations, key, receiver)也就是对上述那些方法进行了重写。这段代码是为了解决边缘情况 includes/indexOf/lastIndexOf 是为了避免产生以下情况 const obj {}
const arr reactive([obj])
arr.indexOf(obj) // -1 正常情况下应该返回的是 0push/pop/shift/unshift/splice 是为了避免这些改变数组长度的方法在某些情况下进入死循环 再往下获取了 key 在 target 中对应的值
const res Reflect.get(target, key, receiver)接着判断 key 是 symbol 的情况。如果 isReadonly 为 false 则调用 track 函数进行依赖收集。
track 这个函数往后放一下看完这个 get 函数后再回头来看 track。
接着又判断了 createGetter 传入的 shallow 为 true 和 res 为 ref 类型的这两种情况。
如果 res 还是一个对象并且 isReadonly 为 false 则递归调用 reactive 函数反之调用 readonly 函数。
从调用 reactive 函数这里可以看出vue3 中的响应式和 vue2 的差别不仅在 defineProperty 和 proxy 上在处理响应式的时机上也有变化defineProperty 是一上来就将 target 上的所有属性都变成响应式的但是 vue3 是在当你去读取这个 key 的时候采取将 key 对应的 value 转换成响应式的。
接下来去看一下 track 函数这个函数的作用是用来收集依赖的。
一开始是一个判断条件接下来的这段代码是为了获取当前 key 对应的数据同时构造一个数据结构
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()))
}构造出来的数据结构是这样的
targetMap {target: {key: [dep,...] // dep, set 类型} // map 类型
} // weakMap 类型后边将 activeEffect 添加到 dep 中。这里的 activeEffect 其实就是我们要收集的依赖。
后边又将 dep 添加到了 activeEffect 的 deps 中这一块当时在看的时候并不明白后来是查资料明白的我们放到后边说。如果是开发环境还调用了 onTrack 函数这个函数在文档中有说用于调试侦听器的行为。
至此track 函数就结束了。
遇到的问题 activeEffect.deps.push(dep) 是什么为什么要这样做 语义上来看是将当前 key 所对应的 dep push 到了 activeEffect 的 deps 中但是为什么要这样做还有待思考。网上查了一番这篇文章写的还是很不错的对这个问题点也有一定的解析。 文章内的总结: 这个操作是在为在 reactiveEffect 方法中提到的 cleanup 方法做准备每次收集 activeEffect 之前会先将 activeEffect 中的 deps 清空然后再进行收集依赖。先清空再收集就是为了避免如果 activeEffect 中有在特定条件下才会触发的依赖收集之前已经收集过了但是这次不需要收集所以会先把之前收集的清空掉然后再针对当前这次需要收集的依赖进行收集保证当前收集的依赖肯定是当前需要被收集的。这里又引申除了 reactiveEffect 方法这个方法在 watchEffect 中会用到本文不涉及所以不展开说。 set
set 对应的 createSetter 的返回值
createSetter 接收一个参数 shallow 用来表示是不是浅层对象然后直接 return 了 set 函数。
首先判断了不是浅层对象则处理 oldValue 是 ref 类型但 newValue 不是 ref 类型的情况因为 ref 类型的数据已经是响应式的了所以不需要再次通过 trigger 函数来再次触发依赖。 ref 和 reactive 差不多都可以返回一个响应式的数据但是 ref 需要通过 .value 的形式来获取值。 后边的代码就是判断 target 是不是数组用 Reflect.set() 将 value 添加到 target 中后续又判断了 key 在不在 target 中如果 key 不在 target 中则按 ADD 类型调用 trigger 函数触发依赖反之以 SET 类型调用 trigger 函数。调用完之后将 Reflect.set() 的返回值 return 出去。
接下来看一下 trigger 函数
从 targetMap 中获取 target 对应的依赖没有则 return。
定义了 set 类型的 effects 和 add 方法add 方法主要是将传入的 deps 遍历然后将每个 effect 添加到 effects 中这样 effects 中就保存了所有待执行的 effect。
下边就是根据传入的 type 来执行对应的 add 函数。
再往下就定义了 run 函数它负责来执行 effect如果是开发环境 effect 中有 onTrigger 方法的话会先执行 onTrigger 方法这个方法和 track 函数中调用的 onTrack 函数是一个意思文档中有说用于调试侦听器的行为。如果 effect 中有调度器的话会选择用调度器来执行 effect 否则直接执行 effect。
run 函数的定义完了就是遍历 effects将 run 函数传入并执行。
以上就是 trigger 函数的所有了。
deleteProperty
这个方法就没什么好说的了用 Reflect.deleteProperty() 执行删除判断这个 key 是 target 自身的则调用 trigger 触发依赖然后 return Reflect.deleteProperty() 的返回值。
has
执行 Reflect.has()在 key 是非 Symbol 类型的时候调用 track 函数收集依赖然后 return Reflect.has() 的返回值。
ownKeys
调用 track 收集依赖return Reflect.ownKeys(target)。
collectionHandler
collectionHandlers 对应的 mutableCollectionHandlers
get
get 对应的 createInstrumentationGetter 的返回值
createInstrumentationGetter 函数定义了 isReadonly 和 shallow 两个参数这里在调用的时候传入的都是 false。
方法内也根据这两个参数去获取了对应的 handlers 定义为 instrumentations后边判断了 key 的三种特殊情况这里的 key 代表的是调用 get 方法时的 key根据 key 的不同 return 对应的值。
最后判断 key 是不是 instrumentations 自身的属性如果是则 Reflect.get() 传入的第一个值是 instrumentations反之直接将 target最后将 Reflect.get() 的返回值 return。
这个 collectionHandlers 不进行具体展开主要还是围绕着我们的主题进行。
collectionHandlers 到此结束。
总结 vue3 的响应式将 target 对象传入 proxy然后利用 handlers在执行 get/has/ownKeys 等获取值方法的时候进行依赖收集在执行 set/deleteProperty 等更改值方法的时候进行触发依赖。 vue3 对于 target 的某一个 key 的 value 值还是对象的时候只有在读取到这个 key 的时候才将 value 进行响应式处理而 vue2 的处理是初始化的时候直接将所有属性及属性值进行响应式处理。 以上就是我关于 reactive 源码的阅读过程在我最终读完之后去跑 demo 的时候发现进入到 track 函数的时候在一开始那个判断的地方就被 return 出去了并没有真正的收集依赖。这也就产生了我的另外一个问题什么时候才会收集依赖呢。有了这个问题可以继续把源码看下去了。
参考链接
源码系列Vue3深入浅出一Vue3 文档Vue3最啰嗦的Reactivity数据响应式原理解析
