第三十六篇: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