响应式数据原理 ​

函数副作用 ​

什么是函数副作用？ ​

函数副作用是指当调用函数时，除了返回函数值之外，还对函数以外产生了附加的影响，JS 中能产生副作用的函数很多，例如下面的函数修改了全局变量，就是一个具有副作用的函数了。

// 全局变量
let foo = 1;

function effect() {
  foo = 2;
}

// 全局变量
let foo = 1;

function effect() {
  foo = 2;
}

如何利用函数副作用实现响应式数据 ​

响应式数据就是在数据修改后，例如页面中渲染的该数据也会自动更新，那么如果能在修改数据的时候，能自动执行使用了该数据的副作用函数，那么就实现了响应式数据。

那么如何在修改数据的时候，自动执行副作用函数呢？

有两种方法可以拦截修改数据的操作，一是defineProperty，一是Proxy，随着浏览器技术的发展，目前的主流浏览器最新版本都已支持 Proxy，所以Vue 3使用了Proxy实现了响应式数据。

简单示例：

而在一个完整的网页或者系统中，一个数据很可能会有很多处使用，那么我们就应该是把这些副作用的函数搜集起来统一处理

那我们在读取数据的时候将副作用函数放到一个 Set 中，（为了避免同一个函数重复加入因此使用 Set），在修改数据的时候将副作用函数从 Set 中取出并执行。