经过了一系列的vue3学习以后，也用vue3开发了一些东西。不过他背后的原理都不是特别懂，所以最近看了下vue3的源码，理解也不是特别深，不过大致做的事情流程能理明白。为了更好的学习以及深入了解原理我决定以写博客的形式来总结记录一下。
当我们去调用watch这一个函数的时候，这个函数实在runtime-core文件夹里面apiWatch.ts这个文件里面的函数
然后他会去调用doWatch这个函数然后把你监听的数据，以及要执行的回调函数还有其他相关的配置传入进去doWatch这一个函数做的最核心的事情会定义一个叫getter的函数这个函数的作用他会在第一次的时候执行然后返回你初始旧的值，之后数据改变的时候在执行一个获取最新的值。这个函数会被放到一个叫effect的函数里面去执行，并传递一个对象进去。
effect函数做的事情也不难，就是创建一个叫effect的响应式函数。执行的时候会用activeEffect全局变量来保存。当访问到对应属性的get捕获器时会track调用到函数收集到属性对应的set数据结构里面。最后他会先执行一边runner函数用来获取旧的值，并且触发你对应的捕获器来收集
我这里用的是用ref创建的实例对象的数据值，所以在我调用runner函数执行里面的getter函数时他会对应触发我的
这些捕获器，之后的话就调用track来进行收集咯。当我们通过this.count来进行改变数据的时候,watch这个监听器就会知道我们值发生改变然后执行你对应的回调函数了。但是其实具体他的改变数据到回调的流程是这样的。我们在methods还有setup返回的函数最终都会通过bind绑定this指向，这个this会是你对应instance.ctx这个属性的代理对象。所以你会先触发他的set
他会去看你的这个触发的属性在setup返回的对象里面还是data里面等其他判断，我们用ref创建的所以是在setupstate里面，然后他会去触发setupstate的set捕获器。
之后他会去拿到我setupstate的这一个count实例对象，在获取值是会先判断一下，如果你是通过某些类创建出来的对象后他就会赋值你的value属性。前面我们看过ref创建的实例对象里面是有写对value的捕获器的。所以最终我们就会去调用你count实例对象的set捕获器。他先会去把你的_value的值赋值为newvalue，之后就会调用trigger函数。这个函数是响应式系统派发通知的函数。
所以最终他会取出来你收集的响应式函数，放到一个effects的函数里面遍历调用run这个回调函数。因为我们在执行effect函数时是有传进来options这个对象的所以他会执行你的scheduler这个函数并把你这个响应式函数传进去
他会把一个叫job的函数放到queuePreFlushCb这个函数队列里面，经过一些操纵处理在合适的时机最终会在flushPreFlushCbs的这个函数里面去执行你的job函数。
这个函数做的事情很简单，首先先再次调用你的runner也就是那个effect函数拿到最新修改后的数据，之后调用callWithAsyncErrorHandling这个函数把你的cb，也就是watch侦听数据改变之后要执行的回调函数，以及你的组件实例对象，还有你最新的数据以及之前旧的数据放到数组里面传递过去。最终在这里
就会执行你的cb函数，并且把你那个数组，里面有你新的数据和旧的数据给你传过去。这也就是为什么我们可以用两个参数来接受你的两个新旧的值。watch原理主要核心的流程以及步骤就这些了。
