Implementing Vue 3 Reactivity with Proxy, Reactive, and Ref Functions

The article introduces a step‑by‑step implementation of Vue 3’s reactivity mechanism, starting with simple effect functions that return strings based on variables and demonstrating how changes to those variables require manual re‑execution of each effect.

To automate updates, the author defines gather and trigger functions that store effect callbacks in a Set and invoke them when a dependency changes. The code shows how to collect multiple effects and trigger them after modifying age .

<code>var name = 'sl', age = 22;
effect1 = () => `我叫${name}，今年${age}岁`;
effect2 = () => `我叫${name}，今年${age+1}岁`;
console.log(effect1()); // 我叫sl，今年22岁
console.log(effect2()); // 我叫sl，今年23岁
age = 30;
console.log(effect1()); // 我叫sl，今年30岁
console.log(effect2()); // 我叫sl，今年31岁</code>

The author then discusses handling multiple variables, especially when they are objects. For primitive values a Set suffices, while objects require a Map and multiple objects benefit from a WeakMap . Example code demonstrates dependency collection for two objects ( obj1 and obj2 ) using these structures.

<code>var obj1 = {name: "tom", age: 22};
var obj2 = {name: "joy", age: 23};
// ... gather and trigger logic using WeakMap, Map, Set ...
obj1.age = 30;
obj2.age = 10;
trigger(obj1, "age");
trigger(obj2, "age");</code>

To achieve automatic dependency tracking, the article introduces a Proxy -based reactive function. The proxy’s get handler calls gather to collect dependencies, while the set handler calls trigger to update them.

<code>function reactive(target) {
  const handle = {
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(receiver, key); // auto‑update on set
    },
    get(target, key, receiver) {
      gather(receiver, key); // collect on get
      return Reflect.get(target, key, receiver);
    }
  };
  return new Proxy(target, handle);
}</code>

Applying reactive to objects allows the same effect functions to react automatically when properties change, eliminating manual trigger calls.

<code>var obj1 = reactive({name: "tom", age: 22});
var obj2 = reactive({name: "joy", age: 23});
// effect definitions remain the same
obj1.age = 30; // automatically updates dependent effects
obj2.age = 10;</code>

The article also refines the effect registration by introducing a global activeEffect variable and an effect wrapper that sets this variable while the effect runs, allowing gather to add the currently executing effect without hard‑coding specific callbacks.

<code>let activeEffect = null;
function effect(fn) {
  activeEffect = fn;
  activeEffect();
  activeEffect = null;
}
// usage
effect(effect1);
effect(effect2);
</code>

Finally, the author implements Vue 3’s ref utility as a thin wrapper around reactive , exposing a .value property for primitive values.

<code>function ref(name) {
  return reactive({ value: name });
}
const name = ref('tom');
console.log(name.value); // tom
</code>

The complete source code, combining activeEffect , effect , dependency maps, reactive , and ref , is provided at the end of the article for readers to study and experiment with.