用过vue的知道,vue的响应实现用的Proxy,且里面是配合Reflect用的,查看Proxy和Reflect文档最显眼的是Reflect对象的静态方法和Proxy代理方法的命名相同,Reflect可以操作对象使用, proxy可以代理对象,但没有找到为啥有时一定要在Proxy代理方法中使用Reflect
基本操作
Reflect对象的静态方法和Proxy代理方法的命名相同,都有13种,示例get,set如下
const tempObj = { a: 1 }; Reflect.get(tempObj, 'a'); // 返回 1 Reflect.set(tempObj, 'a', 2); // 返回true 表示设置成功, a的值变2 const tempObj1 = { a: 1 }; const handler = { get: function (obj, prop, receiver) { return prop === 'a' ? 1000 : obj[prop]; }, set: function (obj, prop, value, receiver) { console.log(prop); obj[prop] = prop === 'a' ? 6 : value; return true; }, }; const proxyObj = new Proxy(tempObj1, handler); proxyObj.a; // proxyObj => {a: 1000} proxyObj.a = 2; // proxyObj => {a: 6}
疑问
如果Proxy不做其它操作直接正常返回
const tempObj1 = { a: 1 }; const handler = { get: function (obj, prop, receiver) { return obj[prop]; }, set: function (obj, prop, value, receiver) { obj[prop] = value return true; }, }; const proxyObj = new Proxy(tempObj1, handler); proxyObj.a; // proxyObj => {a: 1} proxyObj.a = 2; // proxyObj => {a: 2}
以上面情况完Proxy可以不使用Reflect处理拦截,比使用Reflect简单多了
不一样的对象, 带有get的对象
const tempObj1 = { a: 1, get value() { console.log(this === proxyObj); // false return this.a; }, }; const handler = { get: function (obj, prop, receiver) { return obj[prop]; }, set: function (obj, prop, value, receiver) { obj[prop] = value; return true; }, }; const proxyObj = new Proxy(tempObj1, handler); proxyObj.value; // 1
上面value中的打印的值为false,期望的结果应该true, 但应该代理中用的原对象取值所以this指向了原对象,所以值为false
虽然this指错了,但得到值还是正确定,这不是一定的理由
const parent = { a: 1, get value() { console.log(this === child); // false return this.a; }, }; const handler = { get: function (obj, prop, receiver) { return obj[prop]; }, set: function (obj, prop, value, receiver) { obj[prop] = value; return true; }, }; const proxyObj = new Proxy(parent, handler); const child = Object.setPrototypeOf({ a: 2 }, proxyObj); child.value; // 1
这就有问题了,输出的结果都和期望的不一样了,this应该指向child,但指向了parent
Reflect上场
要是Reflect.get(obj, prop)
换成obj[prop]
,这等于没换,意义和结果是一样的,这不是还有一个receiver参数没有用嘛
const parent = { a: 1, get value() { console.log(this === child); // true return this.a; }, }; const handler = { get: function (obj, prop, receiver) { Reflect.get(obj, prop) - return obj[prop]; + retrun Reflect.get(obj, prop, receiver) }, set: function (obj, prop, value, receiver) { - obj[prop] = value; + Reflect.get(obj, prop, value, receiver) return true; }, }; const proxyObj = new Proxy(parent, handler); const child = Object.setPrototypeOf({ a: 2 }, proxyObj); child.value; // 2
this
指向正确,结果也当然和期望一致,receive
r的不是指代理对象,也不是指原对象,而是执行上下文(有句话是这么说的,不用特定方式改变this的情况下,谁调用指向谁,这就是期望的),这里child
调用的value
所以期望的指向应该是child
, 这里你可能想到直接用receiver[prop]
不行了,这样会出现执行溢出,receiver[prop]
相当于child.value
,child.value
还没执行完,receiver[prop]
又执行了,就会无限在执行
Reflect.get(target, key, receiver)
中的receiver
参数修改了this
指向,不加this
指向target
, 加了后指向receiver
代理对象中有用到
this
时一定要用到Reflect
,这样才能得到一直符合期望的值
总结
vue3中的代理对象到得的都是符合期望的值,在拦截中做了收集和更新,所以一定要在Proxy
的拦截函数中使用Reflect
处理
怎么一直拿到符合期望的值,代理了像没有代理一样
get: function (...arg) { return Reflect.get(...arg); },
以上就是vue3中的Proxy为什么一定要用Reflect的详细内容。