Vue 的响应式原理

Wed, 04 Mar 2026 19:46:28 +0800

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() 来查看效果。

Vue on Bigshans' Blog

Vue 的响应式原理

Vue 3.2