解释 Vue 2 中为什么对数组的 `push`, `pop`, `shift`, `unshift` 等方法进行重写，并分析其源码实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊 Vue 2 里面一个有点意思的小秘密：为什么它要对数组的 push、pop、shift、unshift 这些方法进行重写？这背后又藏着啥样的代码乾坤？别担心，今天咱们就用最轻松幽默的方式，把这事儿给扒个底朝天，保证让你听完之后，感觉自己也能去手搓一个 Vue 了！

一、为啥要重写？响应式的小心思

首先，我们要搞清楚一个大前提：Vue 的核心是响应式系统。啥叫响应式？简单来说，就是当你的数据发生变化时，页面上的视图能够自动更新，不用你手动去刷新或者重新渲染。这就像你种了一棵摇钱树，树上的果实（数据）一变多，你的钱包（视图）也能跟着鼓起来，多爽！

但是，JavaScript 数组自带的那些方法，比如 push、pop，它们在改变数组内容之后，并不会主动通知 Vue，说：“嘿，老弟，我变了，快去更新页面！” 这就导致了一个问题：你用 push 往数组里加了个元素，页面上却没反应，观众老爷们不满意啊！

为了解决这个问题，Vue 就不得不祭出一个大招：重写数组的这些方法。重写之后，每次调用这些方法，Vue 都能“偷偷地”监听到数组的变化，然后通知响应式系统去更新视图。这就像给数组安了个窃听器，它一有啥动静，Vue 立马就知道。

二、重写了哪些方法？数组界的“七宗罪”

Vue 重写的数组方法，主要有以下七个（江湖人称“数组七宗罪”）：

方法名	功能描述	是否会改变原数组
`push()`	在数组末尾添加一个或多个元素	是
`pop()`	删除数组末尾的最后一个元素	是
`shift()`	删除数组的第一个元素	是
`unshift()`	在数组的开头添加一个或多个元素	是
`splice()`	从数组中添加或删除元素	是
`sort()`	对数组的元素进行排序	是
`reverse()`	反转数组中元素的顺序	是

这七个方法有个共同点：它们都会改变原数组的内容。而 Vue 恰恰需要监控这些改变，才能实现响应式更新。

三、源码剖析：Vue 是怎么动的手脚？

接下来，咱们就要深入 Vue 的源码，看看它是怎么对数组的这些方法进行重写的。别害怕，其实没那么复杂，咱们一点一点来。

获取原始数组方法：

首先，Vue 需要把 JavaScript 数组原生的那些方法先保存下来，免得重写之后把老祖宗的东西给忘了。
```
const arrayProto = Array.prototype; // 获取数组的原型
const arrayMethods = Object.create(arrayProto); // 创建一个新的对象，继承自数组原型
```
这里 arrayMethods 就像一个备份仓库，里面存放着数组的原始方法。
定义需要重写的方法：

然后，Vue 定义一个数组，里面存放着需要重写的方法的名字。
```
const methodsToPatch = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
];
```
这个 methodsToPatch 就像一个“黑名单”，里面列着 Vue 想要“动刀子”的方法。
遍历“黑名单”，逐个重写：

接下来，Vue 会遍历 methodsToPatch 这个数组，对里面的每个方法进行重写。
```
methodsToPatch.forEach(function (method) {
 // 获取原始方法
 const original = arrayProto[method];
 def(arrayMethods, method, function mutator(...args) {
   // 在这里做一些“手脚”
   const result = original.apply(this, args); // 先调用原始方法
   const ob = this.__ob__; // 获取 Observer 实例
   let inserted;
   switch (method) {
     case 'push':
     case 'unshift':
       inserted = args;
       break;
     case 'splice':
       inserted = args.slice(2);
       break;
   }
   if (inserted) {
     ob.observeArray(inserted); // 对新增的元素进行观测
   }
   ob.dep.notify(); // 通知依赖更新
   return result;
 });
});
```
这段代码是整个重写过程的核心，咱们来一步一步地分析：
- const original = arrayProto[method];：这一句是把原始的数组方法保存起来，方便后面调用。就像把老祖宗的武功秘籍先抄一份，免得改动的时候把真传给丢了。
- def(arrayMethods, method, function mutator(...args) { ... });：这一句是定义一个新的函数，替换掉 arrayMethods 对象中原来的方法。 def 函数其实就是 Object.defineProperty 的一个封装，用来定义对象的属性。
- const result = original.apply(this, args);：这一句是调用原始的数组方法，并把结果保存起来。就像先按照老祖宗的秘籍练一遍，看看效果如何。
- const ob = this.__ob__;：这一句是获取当前数组的 Observer 实例。每个被 Vue 观测的数组，都会有一个 __ob__ 属性，指向对应的 Observer 实例。 Observer 实例负责监听数组的变化，并在变化发生时通知依赖更新。这就像给数组安了个监控摄像头，随时观察它的一举一动。
- let inserted; switch (method) { ... }：这一段代码是用来处理 push、unshift、splice 这三个方法新增的元素。如果数组因为这三个方法新增了元素，Vue 需要对这些新增的元素进行观测，确保它们也能被响应式系统所管理。
- if (inserted) { ob.observeArray(inserted); }：如果存在新增的元素，就调用 ob.observeArray() 方法对它们进行观测。这就像给新来的小弟也装上监控摄像头，确保整个团队都在监控之下。
- ob.dep.notify();：这一句是通知依赖更新。 ob.dep 是一个 Dep 实例，它负责管理所有依赖于当前数组的 Watcher 实例。当数组发生变化时，ob.dep.notify() 方法会通知所有 Watcher 实例去更新视图。这就像按下警报按钮，通知所有人都来围观数组的变化。
- return result;：最后，返回原始数组方法的返回值。这就像练完武功之后，把老祖宗的秘籍还回去，保持原样。
总的来说，Vue 重写数组方法的过程，就是在调用原始方法的前后，做了一些“手脚”，确保数组的变化能够被响应式系统所感知，并触发视图的更新。
替换数组原型：

最后，Vue 需要把数组的原型指向我们修改后的 arrayMethods 对象。
```
const arrayKeys = Object.getOwnPropertyNames(arrayMethods);
/**
* Intercept mutating methods and emit events
*/
(function () {
 for (let i = 0, l = arrayKeys.length; i < l; i++) {
   const key = arrayKeys[i];
   def(Array.prototype, key, arrayMethods[key]);
 }
})();
```
这段代码会将 arrayMethods 对象上的所有属性（也就是我们重写后的方法），都添加到 Array.prototype 上。这样，所有数组实例就都能访问到我们重写后的方法了。

需要注意的是，Vue 并不会直接修改 Array.prototype，而是会创建一个新的对象 arrayMethods，继承自 Array.prototype，然后把 arrayMethods 对象上的方法复制到 Array.prototype 上。这样做的好处是，可以避免对全局的 Array.prototype 造成污染，减少潜在的冲突。

四、代码示例：模拟 Vue 的数组重写

为了更好地理解 Vue 的数组重写机制，咱们可以自己动手写一个简单的模拟。

// 1. 获取原始数组方法
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

// 2. 定义需要重写的方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

// 3. 遍历“黑名单”，逐个重写
methodsToPatch.forEach(function (method) {
  const original = arrayProto[method];
  arrayMethods[method] = function mutator(...args) {
    console.log(`数组方法 ${method} 被调用了，参数是：`, args); // 监听数组方法调用
    const result = original.apply(this, args);
    // 在这里可以添加一些额外的逻辑，比如通知依赖更新
    return result;
  };
});

// 4. 替换数组原型（这里只是演示，实际 Vue 不会直接修改 Array.prototype）
Object.setPrototypeOf(Array.prototype, arrayMethods);

// 测试
const arr = [1, 2, 3];
arr.push(4); // 输出：数组方法 push 被调用了，参数是： [4]
console.log(arr); // 输出：[1, 2, 3, 4]

这段代码模拟了 Vue 对数组方法进行重写的过程。当你调用数组的 push 方法时，控制台会输出一条日志，表明该方法被调用了。虽然这段代码没有实现真正的响应式更新，但是它可以帮助你理解 Vue 的基本原理。

五、为什么要用 Object.setPrototypeOf 代替直接修改 Array.prototype？

在上面的模拟代码中，我们使用了 Object.setPrototypeOf(Array.prototype, arrayMethods); 来替换数组的原型。在实际的 Vue 源码中，Vue并不会直接修改 Array.prototype，而是会创建一个新的对象 arrayMethods，继承自 Array.prototype，然后把 arrayMethods 对象上的方法复制到 Array.prototype 上。

这样做的好处是：

避免污染全局对象： 直接修改 Array.prototype 会影响到所有使用数组的代码，可能会导致一些意想不到的错误。使用 Object.setPrototypeOf 可以避免这种情况，只对当前数组实例生效。
方便卸载： 如果需要卸载 Vue，可以很容易地恢复数组的原型，而不会影响到其他代码。

六、总结：响应式背后的默默守护

Vue 对数组方法的重写，是实现响应式系统的一个关键环节。通过重写这些方法，Vue 能够监听到数组的变化，并及时更新视图。虽然这个过程在幕后默默进行，但它却是 Vue 实现高效、便捷的数据驱动的关键。

希望通过今天的讲解，你对 Vue 的数组重写机制有了更深入的了解。记住，每一个看似简单的功能背后，都隐藏着无数工程师的智慧和努力。让我们一起学习，一起进步，一起成为更优秀的开发者！

好了，今天的讲座就到这里，感谢大家的观看！咱们下期再见！

发表回复 取消回复

发表回复取消回复