持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
4.1 响应式数据与副作用函数
说到vue响应系统，就不得不提到2个概念，响应式数据与副作用函数。
- 副作用函数：执行时这个函数会影响到别的值或者别的函数。 例如：
const effect = ()=>{
document.body.innerHTML='<p>123</p>'
}
当这个函数执行的时候，会影响到body到内容，而别的函数有坑就会使用body，因此它就是一个典型的副作用函数。
- 响应式数据 有了副作用函数这个概念，我们就能定义响应式数据。所谓响应式数据就是：数据的变化会自动调用副作用函数。
const obj = {text:123}
const effect = ()=>{
document.body.innerHTML=`<p>${obj.text}</p>`
}
当其中obj.text变化时，我们希望effect能够自动执行，这样，body中的内容也会自动变化，我们就称obj为响应式数据。
当然，从上面的例子根本做不到响应式，后续我们会想办法让他变成一个响应式数据。
假设我们不知道响应式的时候，我会怎么办呢？
我会这样做，把赋值操作提取出来，然后每次赋值都去调用effect
const effect = ()=>{
document.body.innerHTML=`<p>${obj.text}</p>`
}
const setObj = (text)=>{
obj.text = text
effect()
}
这就再次变成我上一篇文章的观点了。这样的写法就好比是手工机床，以后我们每一个变量都要这样封装，如果有100个obj，那你就得封装100次，调用100次。这样当然也能实现响应式。
但是如果我们让obj能够自己去识别，调用副作用函数，岂不就是数控机床了，程序我们提前写好了，现在只是需要执行一下。而执行的命令就是改变数据。
下一节里我就会书里的讲解，给大家讲一下vue3 的响应式也就是@vue/reactive这个库的实现思路，如果你能再去看看源码，我觉得你之后使用vue问题就不大了
