Vue 中的响应性是如何工作的

本文内容摘自Vue 3官方文档的深入响应式系统，详细内容大家可以查看。

在 JavaScript 中有两种劫持 property 访问的方式：getter / setter 和 Proxy。Vue 2 使用 getter / setter。而在 Vue 3 中则使用了 Proxy 来创建响应式对象，仅将 getter / setter 用于 ref。下面的伪代码将会说明它们是如何工作的：

在 track() 内部，我们会将当前正在运行的副作用作为新订阅者添加到一个存储了所有追踪了该属性的订阅者的 Set 中。

在 trigger() 之中，我们会再查找到该属性的所有订阅副作用，然后执行它们。

通过创建一个能自动跟踪其依赖的副作用，它会在任意依赖被改动时重新运行。我们称其为响应式副作用。

Vue 提供了一个 API 来让你创建响应式副作用 watchEffect()。

参考

深入响应式原理 Vue 2