前言 ​

在vue3中 数据响应式原理，reactive响应式和依赖收集 的过程是怎么样的呢，这是本次的主题。

那什么是数据响应式呢？

首先这个数据要怎么才能知道变化了，这时候后需要一个机制，能够侦测到这个数据的变化，响应这个数据的变化到视图上

第一：为什么需要这个数据响应式

vue是声明式开发，用户只需关心结果不需关心过程，带来最大的好处就是数据驱动，将来只管状态，不需要管具体的操作（DOM操作）。

setupRenderEffect作用当render函数内部响应式数据发生变化，副作用再次执行。

那这个数据时怎么做到响应式的，是什么时候添加上响应式的？

添加响应式 ​

那什么时候初始化给数据添加上响应式的呢？这就要回到mountComponent找到我们的下面这句

在setupComponent的我们有提过，里面有给数据做响应式。具体就是在apllyOptions中对data、props、watch、methods、computed

那来看看apllyOptions吧

处理data数据

reactive ​

创建响应式对象 createReactiveObject

new Proxy的方法从哪里来呢？是通过参数传进来的，沿着往回找

最后找到mutableHandlers

这样我就能随时知道这个值发生了改变，知道了之后就要就行依赖收集，触发更新

依赖收集 ​

上面的get是由createGetter生成的，默认情况下，创一个可变不是只读，且是深层响应式对象

依赖收集如何做呢？

如何创建依赖关闭

那什么时候回触发get的呢？就是当我们在template中使用.的时候，譬如this.value

最后打印的的时候的activeEffect其实就是我们的

总结 ​

走走停停 又回到原处了