解释 Vue 2 中为什么对数组的 `push`, `pop`, `shift`, `unshift` 等方法进行重写，并分析其源码实现。

各位老铁，大家好！今天咱们来聊聊 Vue 2 响应式系统里，一个相当有趣但又容易被忽略的点：数组的变异方法重写。 别看它不起眼，这可是 Vue 实现数据驱动视图的关键一步，理解它能让你对 Vue 的响应式机制有更深的认识。

一、 为什么 Vue 要重写数组方法？

首先，咱们得明白 Vue 的核心思想：数据驱动视图。也就是说，当我们的数据发生变化时，Vue 能够自动更新对应的视图。这背后的机制，就是响应式系统。

对于对象来说，Vue 通过 Object.defineProperty 来劫持对象的属性，从而监听属性的变化。但数组就不一样了，直接修改数组的某个索引，比如 arr[0] = newValue，Vue 可以监听到。 但是，像 push, pop, shift, unshift 这些方法，它们会直接修改数组本身，而不是数组的某个属性。原生 JavaScript 的这些方法，Vue 是无法直接监听到变化的。

如果 Vue 不重写这些方法，当你通过这些方法修改数组时，视图就不会更新，数据驱动视图就失效了。这显然是不行的！为了解决这个问题，Vue 就对这些方法进行了重写。

简单来说，重写的目的就是：在调用这些原生数组方法的同时，通知 Vue 数据发生了变化，从而触发视图的更新。

二、 到底重写了哪些方法？

Vue 主要重写了以下几个数组方法：

• push()：向数组末尾添加一个或多个元素。
• pop()：移除数组末尾的最后一个元素。
• shift()：移除数组的第一个元素。
• unshift()：向数组的开头添加一个或多个元素。
• splice()：从数组中添加或删除元素。
• sort()：对数组进行排序。
• reverse()：反转数组的元素顺序。

这些方法被称为变异方法，因为它们会直接修改数组本身。

三、 源码分析：Vue 到底是怎么重写的？

话不多说，直接上代码，咱们扒一扒 Vue 的源码，看看它是怎么实现的。

以下代码是经过简化后的核心逻辑，方便大家理解：

// array.js  (Vue 源码中可能不是这个文件名，这里只是为了方便说明)

// 1. 拿到原始的数组原型
const arrayProto = Array.prototype;

// 2. 创建一个新的对象，继承自数组原型 (关键！不要直接修改 arrayProto)
export const arrayMethods = Object.create(arrayProto);

// 3. 要重写的数组方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

// 4. 循环重写这些方法
methodsToPatch.forEach(function (method) {
  // 缓存原始方法
  const original = arrayProto[method];

  // 定义新的方法
  def(arrayMethods, method, function mutator (...args) {
    // 1. 先执行原始方法，拿到结果
    const result = original.apply(this, args);

    // 2. 获取 __ob__ 对象 (Observer 实例)
    const ob = this.__ob__;

    // 3. 对新增的元素进行响应式处理 (push, unshift, splice)
    let inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break;
      case 'splice':
        inserted = args.slice(2); // splice(index, removeCount, item1, item2...)
        break;
    }
    if (inserted) {
      ob.observeArray(inserted);  // 对新增的元素进行观测
    }

    // 4. 派发更新 (通知视图更新)
    ob.dep.notify();
    return result;
  });
});

/**
 * Define a property.
 */
function def (obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

代码解读：

1. arrayProto: 保存了原始的 Array.prototype，这是所有数组的原型。
2. arrayMethods: 关键的一步！ Object.create(arrayProto) 创建了一个新对象，以 arrayProto 为原型。 这意味着 arrayMethods 继承了所有数组的方法。 这样做的好处是，我们可以在 arrayMethods 上修改数组方法，而不会影响到全局的 Array.prototype，避免污染全局环境。
3. methodsToPatch: 一个数组，包含了所有需要重写的数组方法。
4. forEach 循环: 循环遍历 methodsToPatch，对每个方法进行重写。
5. original: 在重写之前，先用 original 变量保存原始的数组方法。 这样做是为了在重写后的方法中，仍然能够调用原始的数组方法。
6. def 函数: 这个函数的作用是使用 Object.defineProperty 来定义属性。 在这里，我们使用它来定义新的数组方法。
7. mutator 函数: 这是重写后的数组方法。 它做了以下几件事：
   • 执行原始方法: original.apply(this, args) 调用原始的数组方法，并传入参数。 apply 的作用是改变 this 指向，让 this 指向当前的数组对象。
   • 获取 __ob__ 对象: this.__ob__ 获取数组的 __ob__ 属性，这个属性是一个 Observer 实例，用于观测数组的变化。 每个被 Vue 观测的数据对象（包括数组），都会有一个 __ob__ 属性。
   • 对新增的元素进行响应式处理: 当使用 push、unshift、splice 方法向数组中添加新元素时，需要对这些新元素进行响应式处理，也就是递归地调用 observe 方法，让 Vue 能够监听到这些新元素的变化。
   • 派发更新: ob.dep.notify() 通知 Observer 实例，数据发生了变化，从而触发视图的更新。 dep 是一个 Dep 实例，用于管理依赖于该数据的 Watcher 对象。

四、 如何应用到数组实例？

仅仅重写了数组方法还不够，还需要将这些重写后的方法应用到需要观测的数组实例上。 这部分代码通常在 Observer 类中：

// Observer.js (简化版)
import { arrayMethods } from './array';

export class Observer {
  constructor (value) {
    this.value = value;
    this.dep = new Dep(); // 为数组添加依赖收集器
    def(value, '__ob__', this); // 添加 __ob__ 属性

    if (Array.isArray(value)) {
      // 如果是数组，则修改数组的原型链
      protoAugment(value, arrayMethods);
      this.observeArray(value); // 观测数组中的每一项
    } else {
      this.walk(value); // 观测对象的所有属性
    }
  }

  observeArray (items) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i]);  // 递归观测数组的每一项
    }
  }
}

// 修改数组的原型链
function protoAugment (target, src) {
  target.__proto__ = src; // 直接修改 __proto__
  // 或者使用以下方式（兼容性更好，但性能稍差）
  // Object.setPrototypeOf(target, src);
}

代码解读：

1. Observer 类: 用于观测数据，当数据发生变化时，通知相关的 Watcher 对象。
2. constructor: Observer 类的构造函数。
   • def(value, '__ob__', this): 为被观测的数据对象添加 __ob__ 属性，指向当前的 Observer 实例。 这个属性的作用是让 Vue 能够找到该数据的 Observer 实例，从而进行依赖收集和派发更新。
   • protoAugment(value, arrayMethods): 如果被观测的数据是数组，则调用 protoAugment 函数，修改数组的原型链。
   • this.observeArray(value): 观测数组中的每一项，如果数组中的元素也是对象或数组，则递归地调用 observe 函数，进行深度观测。
3. protoAugment 函数: 这个函数的作用是修改数组的原型链，将 arrayMethods 设置为数组的原型。 这样，当调用数组的 push、pop 等方法时，实际上调用的是 arrayMethods 中重写后的方法。
4. observeArray 函数: 遍历数组，对数组中的每一项进行观测。

核心总结：

步骤	描述	作用
1	创建 arrayMethods 对象，以 Array.prototype 为原型。	避免直接修改全局 Array.prototype，防止污染全局环境。
2	重写 push, pop 等数组方法。	在调用原始方法的同时，可以进行依赖收集和派发更新，通知 Vue 数据发生了变化。
3	在 Observer 类中，将数组实例的 __proto__ 指向 arrayMethods。	让数组实例能够访问到重写后的数组方法。
4	当使用 push, unshift, splice 方法向数组中添加新元素时，对这些新元素进行响应式处理。	确保新增的元素也能被 Vue 观测到，当这些元素发生变化时，也能触发视图的更新。
5	通过 ob.dep.notify() 派发更新。	通知所有依赖于该数组的 Watcher 对象，数据发生了变化，从而触发视图的更新。

五、 举个栗子，加深理解

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    };
  },
  methods: {
    addItem() {
      this.list.push(4); // 调用重写后的 push 方法
    }
  }
};
</script>

在这个例子中，当我们点击 "Add Item" 按钮时，addItem 方法会被调用，this.list.push(4) 会向 list 数组中添加一个新元素 4。

由于 push 方法被 Vue 重写了，所以当 push 方法被调用时，Vue 会自动通知相关的 Watcher 对象，数据发生了变化，从而触发视图的更新。 因此，我们可以在页面上看到 list 数组中的内容发生了变化，新增了一个 4。

六、 总结一下

Vue 通过重写数组的变异方法，实现了对数组变化的监听，从而实现了数据驱动视图。 重写的关键在于：

• 创建一个继承自 Array.prototype 的新对象 arrayMethods。
• 重写 push, pop 等方法，在调用原始方法的同时，进行依赖收集和派发更新。
• 修改数组实例的原型链，让数组实例能够访问到重写后的方法。

理解了 Vue 对数组方法的重写，就能更好地理解 Vue 的响应式系统，也能更好地使用 Vue 进行开发。

好了，今天的分享就到这里，希望对大家有所帮助！ 下次有机会再跟大家聊聊 Vue 响应式系统的其他细节。