Vue 3.0 系列之 Reactivity,对应代码版本 vue-next
通过浏览各个文件,可以发现 operations.ts 没有依赖。然后是 effect.ts,只依赖 reactivity 中的 operation.ts ,那么就可以先从这两个文件开始看,然后再找依赖最少的文件,这样源码读起来,就会相对容易一点。
主要创建 mutableHandlers, readonlyHandlers, shallowReactiveHandlers, shallowReadonlyHandlers
四种 ProxyHandler
主要是在 get, size, has, add, set, delete, clear, forEach
的时候添加 track 和 trigger 使其具有响应式
功能不多,就是在变量的 getter 里面 添加 track,setter 里面 trigger 对应的 reactive
主要函数 createReactiveObject
,用 Proxy 代理 target,分别存在 toProxy 和 toRaw 里面
就像目录结构里面介绍的一样,主要把非 Reactive 对象转换成 Reactive 对象
Reactivity 主要是负责给变量添加相应式,给 Vue 的 mutable 打下基础