前言
- 记录下学到的思路和原理
reactive
- 这个就是众所周知用proxy,然后就是几种配置项shallow,readonly什么的,对应几种配置项。其实没啥说的。
依赖收集
- 很有意思的是,如何在effect中去收集依赖,包在effect里看起来好像没做啥事,就能收集到reactive的依赖。并且,不是effect里依赖的还不会去执行。
- 这里用了个技巧,proxy中代理的话必然会去访问属性,从而触发拦截函数,比如,我们在effect中用了 xxx.xx,那么就会在执行.xx时执行对应的拦截函数。同时,在执行时,会标识给全局变量当前正在执行的effect,由于effect支持嵌套,所以这个全局变量是以栈的方式制作的。这样,在执行拦截函数时,拦截函数中可以通过全局变量拿到当前正在执行的effect,以及拦截函数本来就可以获取proxy的键和值。最后,再通过map记录下来,从而完成依赖收集过程。
- 实战中的启发是,如果需要做一个跨函数且可以嵌套执行的函数,考虑使用全局变量栈去解决复杂依赖,标识当前执行变量与运行状态。另外就是可以利用变量的标识当前正在运行的某个东西。
触发更新
- 拦截时可以通过key拿到老值,查看是否数组等判断,得到是否是新增的键或修改的键。
- 在后面数组的判断中还需要处理length修改等情况。
- 之后会从前面依赖收集里有个effect的set表,对上述那些修改要执行effect进行执行。
- 核心就是取值是做track(effect函数里收集依赖),改值的时候做trigger(将对应effect全部执行)
Ref
- 以前ref是个对象,由于对象不方便扩展,改成了类。
- 通过类的属性访问器来代理真正的值。
- 类的属性访问器通过babel转就是defineProperty,所以这玩意跟vue2那个原理一样的。
- reactive要对象,ref就可以是单个值。
toRef
- 跟ref有点像,也是用属性访问器做代理。本质就是代理。
- 这玩意用处是用x.value来代替在effect中写很多个点。因为比如一个对象很深的属性,那么要在effect里点很多个点才能收集到,用这玩意就相当于做了个代理,x.value实际就是取了那个东西的属性。
toRefs
- toRefs的用途主要在return时展开state,模板中可以省略value,于是就可以直接写解构的属性。
- toRefs是toRef的封装,把对象或者数组的每个键值拿去过一遍toRef就是toRefs。
computed
- 实际就是个类,里面拿到getter后扔给effect去执行,返回结果做缓存存起来,有个标识判断要不要更新,否则就从缓存里去数据。另外还需要在取值时做tracker,在设置的时候做trigger