vue3源码(3)——computed

Vue3中的computed底层源码主要是通过使用Proxy对象来实现的。下面是对Vue3中computed底层源码的详细解读：

1. 在Vue3中，computed的实现是通过使用createComputed函数来创建的。createComputed函数接收两个参数：getter和setter。

2. 在createComputed函数中，首先会创建一个响应式的Ref对象，用于存储computed的值。

3. 接着，会创建一个ReactiveEffect对象，用于存储computed的getter函数。ReactiveEffect对象中包含了一个deps数组，用于存储computed所依赖的响应式数据。

4. 在ReactiveEffect对象中，会调用getter函数，并在getter函数中使用track函数来收集computed所依赖的响应式数据。

5. 在getter函数中，会调用runInEffect函数来执行getter函数，并在执行过程中使用track函数来收集computed所依赖的响应式数据。

6. 在runInEffect函数中，会调用getter函数，并在执行过程中使用track函数来收集computed所依赖的响应式数据。

7. 在getter函数执行完毕后，会调用cleanup函数来清除deps数组中的无效依赖。

8. 在createComputed函数中，会返回一个Proxy对象，用于代理computed的访问。Proxy对象中的get函数会调用ReactiveEffect对象中的run函数来执行getter函数，并在执行过程中使用track函数来收集computed所依赖的响应式数据。

9. 在Proxy对象中的set函数中，会调用ReactiveEffect对象中的invalidate函数来标记computed的值为无效，并在执行过程中使用trigger函数来触发computed所依赖的响应式数据的更新。

总的来说，Vue3中的computed底层源码主要是通过使用Proxy对象、Ref对象、ReactiveEffect对象、track函数、trigger函数等来实现的。这些对象和函数的组合，使得computed能够实现响应式的计算，并在计算过程中自动收集和更新依赖的响应式数据。