乐趣区

关于前端: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)

以上代码 c 的后果为 2,这很简略。如果咱们将 obj.a 变为 2,那么 c 的后果是不会变的,咱们必须再次调用 sum 函数,能力失去咱们想要的后果。设想一下,如果咱们更改 obj.aobj.b,不须要咱们调用 sum 函数,c能同步更新该多好,如果能够实现这种性能,那么 obj 咱们就能够称为 响应式数据

退出移动版