当前位置：首页 > article >正文

vue3-07模拟vue3的响应式原理Proxy (代理对象)与Reflect (反射对象)

article 2025/2/28 1:52:38

1.实现原理

通过Proxy (代理对象): 拦截对象中任意属性的变化,包括: 性值的读写、性的添加、属性的删除。
通过Reflect (反射对象): 对源对象的属性进行操作。

new Proxy(data,{
// 拦截读取属性值
get (target, prop) (
return Reflect.get(target, prop)
// 拦截设置属性值或添加新属性
set (target, prop, value) 
return Reflect.set(target,prop, value)
//拦截删除属性
deleteProperty (target,prop) {
return Reflect.deleteProperty(target,prop)
proxy.name = 'tom'

2.模拟响应（proxy）

target->person

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3响应式</title>
    <script>
        // 源对象
        let person = {
            name: "messi",
            age: 15,
        };
        const p = new Proxy(person, {
            // p读取
            get(target, propName) {
                console.log(`已经读取p上的${propName}`, 'target', target, 'propName', propName);
                return Reflect.get(target, propName)
            },
            // p修改与增加
            set(target, propName, value) {
                console.log(`已经修改p上的${propName}属性,更新页面`);
                return Reflect.set(target, propName, value)
            },
            // p删除
            deleteProperty(target, propName) {
                console.log(`已经删除p上的${propName}属性,更新页面`);
                // return delete target[propName];
                return Reflect.defineProperty(target, propName)
            }
        });
    </script>
</head>

<body>

</body>

</html>

对应操作响应式更改