如何获取Proxy对象的原始对象——vue3toRaw给出答案

1,205 阅读1分钟

有个业务场景需要我拿到Proxy对象代理的原始对象,翻了翻vue3的toRaw方法得到了答案。 如下,我们是无法通过testProxy拿到obj(代理对象testProxy的原始对象)的。

const obj = {}
const testProxy = new Proxy(obj, {});

vue3里的toRaw方法是如何实现获取代理对象的原始对象的呢?

其实重点就在于proxy的get方法怎么写,vue3中首先对key进行判断,如果等于某些特殊的标记(vue中统一维护的symbol对象),那么就直接返回原始对象的引用target

vue3截图.png vue3中的toRaw方法:

toRaw方法.png

其中通过访问observed[ReactiveFlags.RAW]来尝试获取原始对象target,最终递归处理raw对象,得到Proxy对象的原始对象