【vue3源码】一、认识副作用函数与响应式数据【vue3源码】一、认识副作用函

认识副作用函数与响应式数据

在分析vue3响应式的实现前，我们需要先搞清两个概念：副作用函数、响应式数据。

副作用函数
副作用函数，顾名思义，会产生副作用的函数被称为副作用函数。那么什么是副作用呢？如果几个函数的运行，可能会影响到其他函数或变量，那么这种影响就是一种副作用。我们来看两个例子：

function changeText(text: string) { document.body.innerText = text }function getText() { return document.body.innerText }

changeText函数会修改body的内容。getText会返回body的内容。如果我们使用changeText修改了body内容，那么会影响到getText获取内容，那么这时changeText就是个副作用函数。副作用函数不一定非要对某些函数产生副作用，如果一个函数修改了全局变量，这其实也是个副作用函数。

var flag = true function changeFlag() { flag = !flag }

changeFlag函数会更改一个全局变量flag，那么这也是一种副作用，所以changeText也是个副作用函数。
响应式数据

let obj = { a: 1, b: 1 } function sum(a: number, b: number) { return a + b }let c = sum(obj.a, obj.b)

【【vue3源码】一、认识副作用函数与响应式数据】以上代码c的结果为2，这很简单。如果我们将obj.a变为2，那么c的结果是不会变的，我们必须再次调用sum函数，才能得到我们想要的结果。想象一下，如果我们更改obj.a或obj.b，不需要我们调用sum函数，c能同步更新该多好，如果可以实现这种功能，那么obj我们就可以称为响应式数据。