各位观众老爷，晚上好！今天咱们来聊聊 Vue 2 里的一个小秘密，一个隐藏在数组操作背后的性能优化大招：Vue 如何对 push, pop, shift, unshift 这些数组方法进行“狸猫换太子”式的重写。
在正式开始之前，先跟大家声明一点，虽然咱们今天的主题是技术性的，但咱们的目标是“听得懂，记得住，用得上”。所以，我会尽量用大白话把这事儿给各位讲明白。
一、 为什么Vue要搞事情？——响应式系统的需求
要理解 Vue 为啥要重写数组方法，首先得明白 Vue 的核心理念：响应式系统。
简单来说，响应式系统就是当你的数据发生变化时，页面上的视图（View）能够自动更新。想象一下，你有一个数据模型，里面存着一个数组，比如 items = ['apple', 'banana']。 如果你往这个数组里 push 了一个新的水果，比如 items.push('orange')，Vue 应该能立刻知道这个变化，并且自动更新页面上显示水果列表的部分。
问题来了，JavaScript 原生的数组方法并不会通知 Vue 数据发生了变化。它们就像一群默默干活的程序员，干完活就走，啥也不说。Vue 怎么知道数组里的数据变了呢？难道要 Vue 时时刻刻盯着数组吗？这也太笨了吧！
所以，Vue 就得想办法让这些数组方法变得“听话”，能够在数组发生变化时主动通知 Vue。 这就是 Vue 重写数组方法的根本原因：为了实现响应式更新。
二、 Vue的“障眼法”——如何重写数组方法
Vue 重写数组方法的思路其实并不复杂，有点像“狸猫换太子”，或者说“中间人攻击”。
-
拿到原生的数组方法： 先把 JavaScript 原生的数组方法（比如
push,pop,shift,unshift）保存下来，免得以后用不了。 -
创建一个新的数组原型： 创建一个新的对象，作为数组的原型。 这个新的原型对象会继承自原生的数组原型，所以它仍然拥有所有原生的数组方法。
-
替换掉原生的数组方法： 在新的原型对象上，针对
push,pop,shift,unshift,splice,sort,reverse这七个会修改数组自身的方法进行重写。 这些被重写的方法会在执行原生逻辑的同时，通知 Vue 数据发生了变化。 -
把新的原型设置为目标数组的原型： 最后，将目标数组的原型设置为我们创建的这个新的原型对象。这样，当我们在目标数组上调用
push等方法时，实际上调用的是我们重写过的方法。
三、 源码剖析——看看Vue是怎么玩转数组方法的
接下来，咱们来扒一扒 Vue 的源码，看看它是怎么一步步实现这个“狸猫换太子”的。
首先，Vue 定义了一个名为 arrayProto 的变量，用来保存原生的数组原型：
const arrayProto = Array.prototype然后，Vue 创建了一个新的对象 arrayMethods， 继承自 arrayProto。 也就是说，arrayMethods 拥有了所有原生的数组方法。
export const arrayMethods = Object.create(arrayProto)接下来，Vue 定义了一个 mutatingMethods 数组，里面包含了所有需要重写的数组方法：
const mutatingMethods = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]然后，Vue 循环遍历 mutatingMethods 数组，针对每个方法进行重写：
mutatingMethods.forEach(function (method) {
// cache original method
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) {
ob.observeArray(inserted)
}
// notify change
ob.dep.notify()
return result
})
})这段代码做了几件事：
-
缓存原始方法：
const original = arrayProto[method]这行代码把原生的数组方法保存到了original变量中， 以后我们还需要调用它。 -
定义新的方法：
def(arrayMethods, method, function mutator (...args) { ... })这行代码在arrayMethods对象上定义了一个新的方法， 方法名和原生的方法名一样。 这个新的方法就是一个“代理”， 它会先执行一些额外的逻辑，然后再调用原生的方法。 -
调用原始方法：
const result = original.apply(this, args)这行代码调用了原生的数组方法，并且把结果保存到了result变量中。 -
处理新增的元素：
switch (method) { ... }这段代码判断了当前调用的方法是不是push,unshift或splice。 如果是，说明有新的元素被添加到数组中，我们需要对这些新的元素进行观测，让它们也变成响应式的。ob.observeArray(inserted)这行代码调用了observeArray方法，对新增的元素进行观测。ob是一个 Observer 实例， 它负责观测数组的变化。
-
通知数据变化：
ob.dep.notify()这行代码通知 Vue 数据发生了变化， 触发视图的更新。ob.dep是一个 Dep 实例，它负责管理所有依赖于这个数组的 Watcher 实例。 当数组发生变化时，ob.dep.notify()会通知所有 Watcher 实例进行更新。 -
返回结果：
return result这行代码返回了原生数组方法的返回值。
最后，Vue 在创建 Observer 实例时，会判断被观测的对象是不是数组。 如果是数组，Vue 会把这个数组的原型设置为 arrayMethods：
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
}这段代码做了两件事：
- 替换数组的原型：
protoAugment(value, arrayMethods)或者copyAugment(value, arrayMethods, arrayKeys)这两行代码的作用是把数组的原型设置为arrayMethods。protoAugment方法直接修改数组的__proto__属性， 而copyAugment方法则把arrayMethods上的方法复制到数组自身。 之所以有两种不同的实现方式，是因为有些浏览器不支持直接修改__proto__属性。
- 观测数组中的元素：
this.observeArray(value)这行代码调用了observeArray方法，对数组中的每个元素进行观测， 让它们也变成响应式的。
至此，Vue 就完成了对数组方法的重写。 当我们调用 push 等方法修改数组时，Vue 就能知道数据发生了变化，并且自动更新页面。
四、 总结与思考
咱们来总结一下今天讲的内容：
| 步骤 | 作用 |
|---|---|
| 1. 保存原生方法 | 为了在重写的方法中能够调用原生的数组方法，需要先将它们保存起来。 |
| 2. 创建新原型 | 创建一个新的对象作为数组的原型，这个新的原型对象继承自原生的数组原型，并且包含了我们重写的方法。 |
| 3. 重写数组方法 | 针对 push, pop, shift, unshift, splice, sort, reverse 这七个会修改数组自身的方法进行重写。 重写的方法会在执行原生逻辑的同时，通知 Vue 数据发生了变化。 |
| 4. 设置数组原型 | 将目标数组的原型设置为我们创建的新的原型对象。这样，当我们在目标数组上调用 push 等方法时，实际上调用的是我们重写过的方法。 |
| 5. 观测新增元素 | 如果数组方法添加了新的元素（比如 push, unshift, splice），我们需要对这些新的元素进行观测，让它们也变成响应式的。 |
| 6. 通知数据变化 | 当数组发生变化时，我们需要通知 Vue 数据发生了变化，触发视图的更新。 |
通过重写数组方法，Vue 实现了一个非常优雅的响应式系统。 它既能够监听到数组的变化，又不会对原生的数组方法造成太大的影响。
最后，留给大家一个思考题： Vue 3 使用 Proxy 代理了整个对象，那么它又是如何实现数组的响应式更新的呢？ 欢迎大家在评论区留言讨论。
今天的讲座就到这里， 感谢各位的观看！ 希望大家能够有所收获。 我们下次再见！