vue3响应式原理

<div id='addBotton'>点击我加一</div>
<div id='incrmBotton'>点击我减一</div>
<script>

//定义目标数据
const a = {
    b: 2
}

//这里就对应vue中的weakMap队列
const stack = []

//代理对象
const proxy = new Proxy(a,{
    get(target,key){
        //当获取数据时，将依赖推入到依赖收集队列中
        if(stack.indexOf(effect) == -1){
            stack.push(effect)
        }         
        return Reflect.get(target,key)
    },
    set(target,key,value){
        //当发生数据改变使，遍历收集到的依赖列表，并执行每个函数
        for(let item of stack) {
            item(value)
        }
        return Reflect.set(target,key,value)
    }
})

//effect函数，需要更新的函数
function effect(value){
    const test = document.getElementById('test')
    test.innerHTML = value
}
//初始化数据，并且被收集依赖
effect(proxy.b)

const addBotton = document.getElementById('addBotton')
const incrm = document.getElementById('incrmBotton')

//触发代理数据改变，会触发依赖更新
addBotton.addEventListener('click',(https://win8.com/)=>{
    proxy.b = a.b + 1
})
incrm.addEventListener('click',()=>{
    proxy.b = a.b - 1
})
    
</script>