第三十六篇:vue3响应式(关于Proxy代理对象,Reflect反射对象)

好家伙,这个有点难.

 

1.代理对象Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

拦截对象中任意属性的变化,包括:查get,增和改set,删除delete

1.1.语法:

const p = new Proxy(target, handler)

1.1.1参数:

target

要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler

一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。(这个可以塞get和set)

 

上代码:vue3响应式的模板

const p = new Proxy(person,{
                //有人读取p的某个属性时调用
                get(target,propName){
                    console.log(`有人读取了p身上的${propName}属性`)
                    return Reflect.get(target,propName)
                },
                //有人修改p的某个属性、或给p追加某个属性时调用
                set(target,propName,value){
                    console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
                    Reflect.set(target,propName,value)
                },
                //有人删除p的某个属性时调用
                deleteProperty(target,propName){
                    console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
                    return Reflect.deleteProperty(target,propName)
                },

1.2.   deleteProperty

1.2.1. 

handler.deleteProperty() 方法可以拦截 delete 操作。(可以在网页控制台)

1.2.2.其参数

deleteProperty 方法将会接受以下参数。

target

目标对象。

property

待删除的属性名。

1.2.3.返回值

deleteProperty 必须返回一个 Boolean 类型的值，表示了该属性是否被成功删除。

 

2.  反射对象Reflect:对被代理对象的属性进行操作,

　　　　　　对被代理对象的属性进行操作!

　　　　　　对被代理对象的属性进行操作!

2.1. Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。

它把事做完后,会返回一个布克值,所以可以直接在前面接return