如何通过简单的例子理解vue的响应式？

副作用函数

一个函数可以影响全局环境，这种情况被称为副作用函数。

// 全局变量
let val = 1

function effect() {
	val = 2 // 修改全局变量，产生副作用
}

响应式数据

const obj = { text: 'hello world' }
function effect() {
	// effect 函数的执行会读取 obj.text
	document.body.innerText = obj.text
}

obj.text = 'hello vue3'

这句代码修改了字段 obj.text 的值，我们希望当值变化后，副
作用函数自动重新执行，如果能实现这个目标，那么对象 obj 就是响
应式数据

响应式数据实现的基本原理

// 存储副作用函数的桶
const bucket = new Set()
// 原始数据
const data = { text: 'hello world' }
// 对原始数据的代理
const obj = new Proxy(data, {
  // 拦截读取操作
  get(target, key) {
    // 将副作用函数 effect 添加到存储副作用函数的桶中
    bucket.add(effect)
    // 返回属性值
    return target[key]
  },
  // 拦截设置操作
  set(target, key, newVal) {
    // 设置属性值
    target[key] = newVal
    // 把副作用函数从桶里取出并执行
    bucket.forEach(fn => fn())
    // 返回 true 代表设置操作成功
    return true
  }
})

我们创建了一个用于存储副作用函数的桶 bucket，它是
Set 类型。接着定义原始数据 data，obj 是原始数据的代理对象，我
们分别设置了 get 和 set 拦截函数，用于拦截读取和设置操作。当读
取属性时将副作用函数 effect 添加到桶里，即
bucket.add(effect)，然后返回属性值；当设置属性值时先更新原
始数据，再将副作用函数从桶里取出并重新执行，这样我们就实现了
响应式数据。

// 副作用函数
function effect() {
  document.body.innerText = obj.text
}
// 执行副作用函数，触发读取
effect()
// 1 秒后修改响应式数据
setTimeout(() => {
  obj.text = 'hello vue3'
}, 1000)

这样我们完成了一个基本的响应式