浅析mini-vue源码中get,set,effect的执行过程

  想要知道vue3响应式的实现原理，就需要知道get,set,effect的执行过程，本篇文章咱们来通过mini-vue浅析一下get,set,effect的执行过程。

分析引入

  先来查看reactive的单元测试文件，打开reactive.spec.ts，可看到调用了reactive函数如下图：进入reactive函数，可以发现返回的是createReactiveObject函数，进入该函数，可以看到核心代码创建了一个Proxy对象，并调用了baseHandlers，如下图：  现在我们打开baseHandlers.ts，发现其中声明了get和set，我们进入到createGetter方法，可以发现此处通过isReadonly和shallow来表示此时的状态，关键行代码通过获取key键对应的值，最后return返回，如下图：  接下来咱们来看set，进入到createSetter函数，发现此处将value的值赋值给key键对应的值，如下图：   set和get看完了，咱们来关注一下effect，打开effect.spec.ts，可以看到当num发生改变，触发响应式变化，调用了effect函数，如下图：  进入effect函数，可以发现此处创建了一个ReactiveEffect，并将fn(用户定义的一个参数)传递进来，执行了run函数，在run函数中执行用户传递来的fn，触发effect中的函数，会调用get，进入到init过程，如下图：

init过程

  触发get之后，咱们进入到createGetter方法中，可以看到执行了track函数，进入track，看到核心行代码，通过解构将dep中的effect储存起来了，进行依赖收集，完成init，如下图：

update过程

  counter.num重新赋值会触发set，进入createSetter方法，可以看到调用了trigger，触发依赖，吧储存的dep拿出来，并对dep进行一个遍历，拿到里面的effect如下图：  进入triggerEffects方法，调用了effect.run进行执行，完成了一次依赖的触发，然后继续通过get进行一次依赖的收集，这时update就完成了。

学习体会

这源码，一起尽在不言中。