简述

上一篇文章我们留了一个问题怎么在obj的数据发生变化的时候我们的页面也跟着更新，这篇文章我们来实现这个遗留问题。

响应式

我们先通过代码来实现这个需求。

const obj = {text:'hello vue3!'}
effect()
function effect(params) {
document.body.innerText = obj.text
}

setTimeout(()=>{
obj.text = '我是修改后的数据'
effect()
},1000)

通过上面的代码执行我们可以看到页面的数据发生了变化

这里我们引入了副作用函数，什么是副作用函数，我们来解释一下，查看他的定义会说：副作用函数是指会产生副作用的函数。这个定义感觉就像没说一样，但其实解释一下就是：这个函数的执行会直接或者间接影响其他的函数的执行，这个时候我们说这个函数产生了副作用。

上面我们了解了什么是副作用函数，接下来说说什么是响应式数据。在上面的代码中副作用函数会设置body元素的innerText属性，其值为obj.text。当obj.text发生变化的时候，我们希望副作用函数effect会重新执行。

在上面的代码中，我们是手动的调用effect函数，使页面中的数据发生了变化，但是我们希望当obj.text的值发生变化的时候，副作用的函数会自动的去执行，如果能实现这个目标，那么对象obj就是响应式数据。很明显当前的代码不能实现这个功能，怎么才能让obj变成响应式数据，下一篇：vue3系列-响应式(二)我们来实现。