vue.js设计与实现(阅读有感)----响应式系统的设计与实现一

最新推荐文章于 2023-03-20 08:45:00 发布

Ma2219908547

最新推荐文章于 2023-03-20 08:45:00 发布

阅读量373

点赞数

分类专栏：响应式实现原理文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Ma2219908547/article/details/126272124

版权

本文基于阅读Vue.js源码，深入探讨了其响应式系统的原理与实现，详细阐述了如何通过数据劫持和依赖收集实现数据变化的自动更新，为前端开发者提供深入理解Vue.js响应式机制的见解。

摘要由CSDN通过智能技术生成

    const data = {text:'hello world'}
    function effect(){
        document.body.innerText = obj.text
    }
    //现在想要只要更改obj.text的值，就让body上的字体变成响应式的。 也就是obj.text = xxx
    //这个过程 会先触发 obj.text的读取操作，然后再触发obj.text的设置操作
    // 当触发读取操作的时候，我们保存这个 副作用函数，触发设置操作的时候，我们再重新调用它就ok了。可以使用 Object.defineProperty 或者 proxy
    // 我们需要设置一个存储当前副作用函数的一个 '桶' 可以使用数组或者Set
    const bucket = new Set()
    const obj = new Proxy(data,{
        get(target,key){
            // return target[key]
            bucket.add(effect)
            return  Reflect.get(target,key)
        },
        set(target,key,newValue){ 
            Reflect.set(target,key,newValue)
            bucket.forEach(exec=>exec())
            return true
        }
    })
    effect()

    //此时，我们的副作用函数名称只能是 effect ，如果出现一点变化，proxy中往set中添加的副作用函数就会出现问题。
    // 我们想要的是 使用effect来注册副作用函数，让副作用函数为一个匿名函数
    // 使用全局变量 activeEffect 来保存这个副作