Vue 3 使用 Proxy 是一大创举,它成功解决了 Vue 2 无法追踪新增属性的问题。不过,仅仅是如此吗?不如我们用简单的代码实现一个 reactive 看看。
function reactive(target) { return new Proxy(target, { get(target, key, recevier) { return Reflect.get(target, key, recevier); }, set(target, key, value, recevier) { return Reflect.set(target, key, value, recevier); } }); } 这里,Reflect 和 Proxy() 是配套的,等同于我们直接对 target[key] 进行操作,但用 Reflect 更加方便,也更加安全。我们可以通过在拦截器层面增加 console.log() 来查看效果。