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

《Vuejs设计与实现》读书笔记

Sun, 08 Jan 2023 13:37:21 +0800

第二篇响应系统

第四章响应系统的作用与实现

设计完善的响应式系统

借助 Proxy ，我们实现一个基本的响应式系统。书中代码我改成可以在 Node 中运行的代码了。

const bucket = new Set();

const data = { text: 'hello world' };

const obj = new Proxy(data, {
    get(target, key) {
        bucket.add(effect);
        return target[key];
    },
    set(target, key, newVal) {
        target[key] = newVal;
        bucket.forEach(fn => fn());
        return true;
    }
});

function effect() {
    console.log(obj.text);
}

effect();

setTimeout(() => {
    obj.text = 'Hello Vue';
}, 1000);
// Output:
// hello world
// Hello Vue

这里是写死了 effect ，不过不用太过纠结。

Vue on Bigshans' Blog

Vue 的响应式原理

《Vuejs设计与实现》读书笔记

第二篇响应系统

第四章响应系统的作用与实现

设计完善的响应式系统

Vue 3.2

Vue on Bigshans' Blog

Vue 的响应式原理

《Vuejs设计与实现》读书笔记

第二篇 响应系统

第四章 响应系统的作用与实现

设计完善的响应式系统

第二篇响应系统

第四章响应系统的作用与实现