响应系统的实现 | 接近风的地方

type

status

date

slug

summary

副作用函数是指在计算过程中产生了与函数外部环境交互的操作，例如修改全局变量、发送网络请求、访问数据库、操作DOM等。

在响应式框架中，副作用函数常常用于处理与数据变化相关的副作用操作，例如更新视图、发送通知、保存数据等。

当响应式数据变化时，这些副作用函数可以被重新执行，以保持外部环境与数据的同步。

数据响应化（Data Reactivity）：响应式框架会通过一定的机制将数据转变为响应式的，通常是通过对数据对象进行包装或代理来拦截对象属性的读取和设置操作。这样，在数据发生改变时，框架能够捕捉到变化，并触发相应的更新操作。

依赖追踪（Dependency Tracking）：响应式框架会在访问响应式数据的过程中进行依赖追踪。当一个函数或表达式访问响应式数据时，框架会建立起函数和数据之间的依赖关系。这样，当数据发生变化时，框架能够知道哪些函数或表达式需要重新执行。

重新执行（Reactivity）：当响应式数据发生变化时，框架会自动触发相关函数、组件或表达式的重新执行。这样，数据的变化能够被反映到视图上，保持视图与数据的同步。

如何让一个对象变成响应式数据？

在 ES6 中，可以使用代理对象 Proxy 来实现：

以上代码实现了一个基本的数据响应化，但存在许多缺陷：

建立响应式对象属性与副作用函数一对多的联系：

修改后的代码：

前面的代码实现了属性对副作用函数的一对多收集，但在某些情况下，还需要对副作用依赖进行清理

观察下面这段代码：

解决思路：副作用的执行会触发依赖收集，所以在副作用执行前先把此副作用从依赖集合中删除，那么此副作用的重新执行就会更新最新的依赖

风之旅人