vue3 实现一个简单响应式系统（数据双向绑定）vue3 通过new proxy实现一个简单的响应式系统，修改值时，页面

实现一个简单的响应式系统，修改值时，页面也会跟着改动

// 储存副作用函数的桶
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,newValue){
    // 设置属性值
    target[key] = newValue
    // 把副作用函数从桶里取出并执行
    bucket.forEach(fn => fn())
    // 返回true 代表 设置操作成功
    return true
  }
})

function effect(){
  document.body.innerText = obj.text
}

// 执行副作用函数，触发读取
effect()

// 1 秒后修改响应式数据
setTimeout(()=>{
  obj.text = 'hello vue3'
},1000)