【vue】vue3原理学习总结

前言

• 记录下学到的思路和原理

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