极简版vue3响应式原理

极简版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',()=>{
        proxy.b = a.b + 1
    })
    incrm.addEventListener('click',()=>{
        proxy.b = a.b - 1
    })
        
    </script>