vue3手写proxy对象实现响应式数据

最新推荐文章于 2024-02-27 21:02:02 发布

风向北吹i

最新推荐文章于 2024-02-27 21:02:02 发布

阅读量292

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_40576178/article/details/120120322

版权

本文探讨了Vue中响应式数据的原理，通过手动编写get和set方法模拟Proxy来实现对象属性的监听与更新。get方法用于获取属性值，set方法用于修改属性并确保数据变化的响应性。此外，提到了Reflect反射函数在处理对象属性时的作用。通过这个简单的实现，读者可以更深入地理解Vue中数据响应的机制。

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

vue底层使用proxy实现的响应式数据，下面通过自己手动写一个响应式实现proxy的原理

get( obj, key ) 方法中2个参数： //获取

obj：代表要处理的对象，key：代表对象的键

set( obj, key, newVal ) 方法中3个参数： //修改或添加

obj：代表要处理的对象，key：代表对象的键；newVal：代表重新赋值的数据

deleteProperty( obj, key ){ //删除方法
return delete obj[key]
}

//手写proxy实现响应式数据

let obj = { name: '哈哈', age: 18 }

let state = new Proxy(obj, {

    //获取数据
    get(obj, key) {
        // console.log(obj, key, '热不出来了');
        return obj[key]
    },

    //修改数据
    set(obj, key, newVal) {

        obj[key] = newVal

        return true //此行代码：可能会被误以为没有更新成功，有可能影响下一次set 

    }
})

// console.log(state.name, 'get获取数据');

state.age = 20
console.log(state.age, 'set设置数据');

对于get和set方法可能还有别的参数，后续再做修改

window中有个Reflect反射函数，可以获取、新增/修改、删除某个对象的属性

在这里插入图片描述