揭秘mini-vue3实现reactive & effect收集依赖/触发依赖过程

## 揭秘mini-vue3实现reactive & effect的“收集依赖/触发依赖”功能

本文将深入探讨mini-vue3中reactive & effect是如何实现收集依赖和触发依赖的功能的。我们首先介绍Vue3的响应式系统基础概念，包括reactive、effect和依赖收集。然后通过实例演示mini-vue3的实现，包括如何使用Proxy和Reflect来实现响应式数据，如何使用Set和Map来收集依赖，以及如何使用effect函数来触发依赖。我们还将讨论mini-vue3是如何通过函数式编程来实现reactive & effect功能的。

### 基础概念

**reactive** 

reactive是Vue3的响应式系统中的一个核心概念，它可以将普通的数据对象转换为响应式对象，使其能够被Vue3追踪和更新。当响应式对象中的数据发生变化时，Vue3将自动检测到变化并更新相关的视图。

**effect** 

effect是Vue3中另一个核心概念，它是一个函数，当被执行时，Vue3会自动收集函数中所有用到的响应式数据，并建立依赖关系。当这些数据发生变化时，Vue3将自动调用effect函数，重新执行该函数。

**依赖收集** 

依赖收集是指Vue3在执行effect函数时，会自动收集函数中所有用到的响应式数据，并建立依赖关系。Vue3会维护一个依赖收集器，用来存储这些依赖关系。

**触发依赖** 

触发依赖是指当响应式数据发生变化时，Vue3会自动调用所有与该数据相关的effect函数，重新执行这些函数。Vue3通过依赖收集器来确定哪些effect函数需要被调用。

### mini-vue3的实现

#### reactive的实现

mini-vue3中，reactive的实现是使用Proxy和Reflect。Proxy是一个JavaScript内置的API，它可以创建一个代理对象，该代理对象可以拦截对目标对象的访问和操作。Reflect是一个JavaScript内置的API，它可以提供对Proxy的底层操作。

在mini-vue3中，reactive函数会创建一个代理对象，该代理对象包装了目标对象。当访问代理对象中的属性时，Proxy会拦截该访问，并调用Reflect.get()方法来获取属性值。当设置代理对象中的属性时，Proxy会拦截该设置，并调用Reflect.set()方法来设置属性值。

在Reflect.get()和Reflect.set()方法中，mini-vue3会检查属性值是否为响应式对象。如果是，则会将该属性值也包装成代理对象。这样，就可以实现嵌套响应式对象的功能。

#### effect的实现

mini-vue3中，effect函数的实现是使用Set和Map。Set用来存储effect函数中用到的所有响应式数据。Map用来存储响应式数据与effect函数之间的依赖关系。

当执行effect函数时，mini-vue3会创建一个Set来存储effect函数中用到的所有响应式数据。然后，mini-vue3会创建一个Map，将这些响应式数据作为键，将effect函数作为值，存储到Map中。

当响应式数据发生变化时，mini-vue3会通过Map来找到与该数据相关的effect函数，并调用这些effect函数，重新执行这些函数。

#### 函数式编程

mini-vue3中，reactive和effect都是函数式编程的实现。函数式编程是一种编程范式，它强调使用函数来表示计算，并避免使用可变状态。

在mini-vue3中，reactive和effect都是纯函数。纯函数是指一个函数的输出只取决于函数的输入，而不依赖于函数的内部状态或外部环境。纯函数具有可预测性、可测试性和可重用性等优点。

通过使用函数式编程，mini-vue3实现了reactive和effect的功能，并具有了纯函数的优点。

### 总结

本文详细介绍了mini-vue3中reactive & effect是如何实现收集依赖和触发依赖的功能的。我们首先介绍了Vue3的响应式系统基础概念，包括reactive、effect和依赖收集。然后通过实例演示mini-vue3的实现，包括如何使用Proxy和Reflect来实现响应式数据，如何使用Set和Map来收集依赖，以及如何使用effect函数来触发依赖。我们还讨论了mini-vue3是如何通过函数式编程来实现reactive & effect功能的。希望本文能够帮助读者更好地理解Vue3的响应式系统。