Understanding Vue2 and Vue3 Array Method Overriding and Reactivity Mechanisms

The author begins by sharing personal experience with job hunting and then introduces the technical topic: the frequent interview question about overriding array methods in Vue2 and Vue3.

In Vue2, reactivity is built on Object.defineProperty , which intercepts property get/set operations. The article shows a simplified defineReactive implementation and explains why directly redefining array methods with Object.defineProperty is ineffective.

Vue2 solves this by overriding mutating array methods (push, pop, shift, unshift, splice, sort, reverse). The overridden methods perform three steps: call the native method, apply reactivity to newly added elements, and trigger dependent effects. Diagrams illustrate the process.

Vue3 replaces Object.defineProperty with the ES6 Proxy API, allowing object‑level interception. The article presents a minimal reactive system using Proxy , with track and trigger functions backed by a WeakMap . Example code demonstrates how a proxy tracks reads and triggers updates.

Because a Proxy returns a new proxy object for each element, array lookup methods like includes , indexOf , and lastIndexOf may fail to find the original object. The solution is to rewrite these methods to first search the proxy array and, if not found, fall back to the raw array:

const originIncludes = Array.prototype.includes;
function includes(...args) {
  let res = originIncludes.apply(this, args);
  if (res === false) {
    res = originIncludes.apply(this.raw, args);
  }
  return res;
}

Mutating methods that modify length (e.g., push ) can cause infinite recursion because the getter for length collects dependencies while the setter triggers them. Vue3 avoids this by temporarily disabling tracking during the method execution:

let shouldTrack = true;
function push(...args) {
  shouldTrack = false;
  const res = Array.prototype.push.apply(this, args);
  shouldTrack = true;
  return res;
}

The article includes several full‑page demos showing Vue2 vs. Vue3 reactivity differences, screenshots of source code, and animated GIFs illustrating the reactive updates.

In conclusion, Vue2’s array reactivity relies on method overriding combined with Object.defineProperty , while Vue3 leverages Proxy to intercept operations at the object level, requiring additional method patches for lookup and length‑related methods to maintain correct dependency tracking.