vue的核心是响应式对象，那么它是如何实现的呢？

我们可以将每一次数据变化需要作的修改称为effect，要实现一个响应式对象，需要有三个步骤：

1. 保存effect
2. 监测值的改变
3. 执行trigger effect

核心API Proxy

vue3响应式实现使用了proxy，基础使用如下：

proxy接收两个参数：目标对象和对象处理句柄，上图为person与handler，核心操作在handler中的get、set。两个属性可以在对象读取和修改时触发。

伪代码表述响应式的三个步骤

我们假设一个变量total的值是根据对象product的属性值得来的，它需要在product属性更改时被更新，此时被更新的操作就是一个effect，代码如下：

上图中我们定义了product对象，他有两个属性price、count。另外我们定义了一个effect函数，它根据product属性计算了total的值。可以看到，我们执行了effect得到了一次total的结果，当我们修改product.price后，需要再执行了一次effect，重新计算total的结果。

effect的保存和触发

在实际应用中，我们不可能只有一个effect，所以我们需要有一个保存effect的地方。它通常可以是一个存放effect的数组或者时一个Set集合。

我们定义一个dep集合存储需要在响应式发生时执行的effect，track方法将effect添加到dep集合中，trigger方法则循环了所有的dep集合，并执行了存储的effect函数。如此我们实现了effect的保存和触发。

effect的自动触发与自动收集

在上述伪代码中，我们实现了响应式对象的三个核心步骤，然而，不管是effect的收集还是触发，都是我们手动去调用方法的执行，如何实现effect自动触发与收集呢，这时候我们就要使用前面说的proxy了（vue2为definePropety）。

我们定义了reactive方法，它返回一个proxy。当我们需要一个响应式对象时，我们可以调用reactive方法，将对象作为参数传入，如上图的product。首次执行effect()方法时，代码触发了proxy的get方法，此时我们调用了track方法将effect添加到了dep集合中，当我们执行product.price=10时则触发了set方法，此时set方法中调用了trigger方法为我们执行了所有的effect。

实际情况中我们还需要根据key属性的修改作进一步的判断，同时还要考虑get、set值时是否需要收集和触发effect，以上就是响应式对象实现的基本原理了。