Vue的响应式实现

什么是响应式数据

一个值变化了，与之相关的副作用函数会自动执行(数据改变、模版更新...)，这个值就是响应式数据。在Vue3中，reactive、ref、computed、watch、toRef、toRefs等API来创建和管理响应式数据。

渐进式实现响应式数据

1 最基础的响应式数据

实现的基本思路如下：

1. 当读取操作发生时，将副作用函数收集到“桶”中；
2. 当设置操作发生时，从“桶”中取出副作用函数并执行。

在Vue3中使用Proxy来拦截对象读写操作的拦截，一个最简单的响应式就这样实现了：

2 统一注册副作用函数

目前副作用函数硬编码为effect，显然是不可取的。需要有一个统一的副作用函数注册机制，即使是匿名函数，也能被正确的收集。
注册函数effect，每个正在读取obj.text的副作用函数都命名为activeEffect

收集副作用函数：

3 细化依赖粒度

目前依赖的粒度是对象，副作用函数effectFn依赖obj.text，但obj.name改变，effectFn也会改变，因此需要把依赖的粒度细化到属性层面。 对象target、属性key、副作用函数effectFn的关系如下：