手写 Vue.js 2.x 源码之实现响应式：数组劫持大揭秘

前端

2023-10-12 07:11:50

Vue.js 响应式系统的奥秘：揭秘数组劫持

在前端开发的浩瀚世界中，Vue.js 耀眼夺目，备受瞩目。它的响应式系统更是令无数开发者赞不绝口，它究竟是如何工作的？让我们一起踏上探寻之旅，揭开数组劫持的秘密。

Vue.js 的响应式机制

Vue.js 的响应式系统，就像一个灵敏的守卫者，时刻监视着数据的变化，并及时更新视图。它的实现离不开几个关键技术：

Object.defineProperty()： 通过这个方法，我们可以劫持对象的属性，在访问或修改它们时触发回调函数。
Proxy： ES6 中的 Proxy，可以将对象变成透明的代理，拦截对象上的各种操作。

数组劫持的诞生

数组在 JavaScript 中，可谓是"任性"的存在，它们的长度和索引都易变。这给 Vue.js 的响应式系统带来了难题：如果直接劫持数组，在长度改变时，劫持失效，无法及时更新视图。

为了解决这个棘手的难题，Vue.js 祭出了杀手锏——数组劫持。它的核心思想是：将数组的原生方法（如 push、pop）升级为响应式方法，这样，每当调用这些方法时，都能触发响应式更新。

数组劫持的实现

Vue.js 2.x 中的数组劫持，主要通过以下步骤实现：

使用 Object.defineProperty() 劫持 length 属性： 长度一变，就会触发回调函数，进行响应式更新。
用 Proxy 劫持数组方法： 原始方法被包装成响应式方法，调用时同样会触发响应式更新。
拦截原型方法： 通过 Object.getPrototypeOf()，获取数组的原型对象，对其方法进行劫持，确保原型链上的方法也能被拦截。

实例解析

代码胜过千言万语，我们通过一个简单的例子来理解数组劫持：

const arr = [1, 2, 3];

Object.defineProperty(arr, 'length', {
  set: function(newValue) {
    this.length = newValue; // 触发响应式更新
  }
});

Array.prototype.push = function() {
  originalPush.apply(this, arguments); // 触发响应式更新
};

arr.push(4); // 长度变化，触发响应式更新