简述

从这篇文章开始我们手写代码，实现vue3的响应式原理，由浅及深一起学习探究。

引入

通过一个小的demo来实现响应式的数据。

<script>
const obj = {text:'hello vue3!'}
document.body.innerText = obj.text
setTimeout(()=>{
obj.text = '我是修改后的数据'
},1000)
</script>

通过代码的执行我们在页面中看到的是这样的

截屏2023-05-05 14.29.02.png 并且页面的中的数据不会随着obj中的数据变化而变化。为了能够使数据进行更新，我们对代码做一下修改

<script>

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

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

</script>

这里我们引入一个函数，这样的话跟上面的效果是一样的，只能是展现出来obj中的数据，但是当obj的数据发生变化的时候，页面并不会改变。那怎么才能实现数据变化的时候页面变化呢？下一篇：vue3系列-响应式(一)详细讲述

vue3系列-开端

简述

引入