vue3状态流转记录

刚用vue3的时候觉得习惯了之后非常爽，比vue2比起来要灵活，ref、reactive等新api写几个页面也基本理解用法了。

但是逐渐深入后发现遇到一些疑难问题的时候，排查起来非常困难，其依赖收集比起vue2复杂太多，我在写pinia插件的时候尤其痛苦，
感觉心智负担比原来重多了，所以这篇文章记录一下几个api在使用的时候里面的各种set、get的不同处理方式。

reactive

先从最简单的，什么都不嵌套的来梳理下

var data = {a:{b:33}}

var reactiveData = reactive(data)

var c = computed(()=>{
  return reactiveData.a.b
})
const vv = ()=>{
  reactiveData.a.b = 44
};

get收集逻辑

这里的依赖收集是通过computed来触发的

• 因为是使用的reactive，所以一开始生成reactiveData的时候只有最外层的对象被proxy了

• 在computed里执行reactiveData.a

  • 执行Reflect.get(target, key, receiver)得到结果命名为res

  • 执行track(target, "get" , key)把reactiveData.a进行依赖收集，放入computed这个activeEffect里

  • 判断res是否是对象（ 是，res为{b:33} ），执行 reactive(res)，把内部对象也转为响应式的

• 接上一步返回的结果接着执行a.b

  • 跟上面很像，只是没有执行最后一步

总结一下，如果reactive收集复杂对象，会把需要的每一层对象都变为响应式且放进对应的activeEffect里