各位靓仔靓女们，早上好！今天咱们来聊聊 Vue 2 里的一个“老生常谈”但又不得不谈的话题：数组的那些事儿。
准确地说，是 Vue 2 为什么要对数组的 push, pop, shift, unshift, splice, sort, reverse 这七个方法进行重写。
你们可能会想，数组方法就数组方法呗，浏览器自带的，直接用不香吗？干嘛要画蛇添足，搞得这么复杂？
别急，听我慢慢道来，咱们抽丝剥茧，保证让你们听明白，搞清楚，以后面试再也不怕被问到这个问题。
故事的开端：响应式系统的“盲区”
要理解为什么要重写数组方法，首先要搞清楚 Vue 的响应式系统是怎么工作的。简单来说，Vue 会对 data 里的数据进行“监听”，当数据发生变化时，Vue 就能知道，然后去更新页面。
这个“监听”是通过 Object.defineProperty 这个 API 实现的。它允许我们拦截对对象属性的读取（get）和设置（set）操作。
// 一个简化的响应式例子
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get: function() {
console.log(`Getting key: ${key}`);
return val;
},
set: function(newVal) {
console.log(`Setting key: ${key} to ${newVal}`);
if (newVal !== val) {
val = newVal;
// 这里触发更新视图的操作 (简略)
console.log("视图更新！");
}
}
});
}
let data = {
name: '张三',
age: 18
};
defineReactive(data, 'name', data.name);
defineReactive(data, 'age', data.age);
data.name = '李四'; // 输出：Setting key: name to 李四 视图更新！
console.log(data.name); // 输出：Getting key: name 李四这段代码模拟了 Vue 响应式系统的核心原理。当我们修改 data.name 的时候，set 拦截器会被触发，然后我们就可以做一些事情，比如更新视图。
但是，问题来了！Object.defineProperty 有一个“盲区”：它只能监听对象属性的修改，而不能直接监听数组元素的修改。
let data = {
arr: [1, 2, 3]
};
defineReactive(data, 'arr', data.arr);
data.arr[0] = 10; // 哎？没有任何反应！当我们试图修改 data.arr[0] 的时候，set 拦截器并没有被触发。Vue 根本不知道数组里的元素被修改了，自然也就不会更新视图了。
这就是 Vue 2 需要重写数组方法的原因：为了弥补 Object.defineProperty 的这个缺陷，让 Vue 能够监听到数组的变化，从而实现响应式更新。
七大金刚：被重写的数组方法
Vue 2 选择了 push, pop, shift, unshift, splice, sort, reverse 这七个方法进行重写，而不是全部。 为什么是这七个？
因为这七个方法都会直接修改数组本身。其他的数组方法，比如 slice, concat, filter, map, reduce 等，都不会修改原数组，而是返回一个新的数组。对于返回新数组的情况，Vue 只需要监听对原数组的替换即可。
下面这个表格总结了这七个方法的作用：
| 方法 | 作用 | 是否会触发视图更新（重写后） |
|---|---|---|
push() |
在数组末尾添加一个或多个元素 | 是 |
pop() |
删除并返回数组的最后一个元素 | 是 |
shift() |
删除并返回数组的第一个元素 | 是 |
unshift() |
在数组开头添加一个或多个元素 | 是 |
splice() |
从数组中添加或删除元素 | 是 |
sort() |
对数组的元素进行排序 | 是 |
reverse() |
反转数组中元素的顺序 | 是 |
重写背后的秘密：一个“障眼法”
Vue 2 重写数组方法的核心思想是：用我们自己定义的函数，去替换掉原生的数组方法。 但是，我们又不能真的把原生的方法给“干掉”，因为我们还需要用到它们的功能。所以，我们需要做一个“障眼法”。
- 备份原生的数组方法： 先把原生的方法保存起来，以备后用。
- 创建一个新的数组原型： 继承自
Array.prototype，但是重写了那七个方法。 -
把要监听的数组的
__proto__指向我们新的数组原型： 这样，当我们调用数组的push等方法时，实际上调用的是我们重写后的方法。давайте посмотрим код:
// 获取原生的数组原型
const arrayProto = Array.prototype;
// 创建一个新的数组原型，继承自 Array.prototype
const arrayMethods = Object.create(arrayProto);
// 要重写的数组方法
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
];
methodsToPatch.forEach(function (method) {
// 备份原生的方法
const original = arrayProto[method];
// 定义新的方法
Object.defineProperty(arrayMethods, method, {
enumerable: false, // 不可枚举，防止被 for...in 循环遍历到
writable: true, // 可写，允许修改
configurable: true, // 可配置，允许删除
value: function mutator (...args) {
// 调用原生的方法，完成数组的修改
const result = original.apply(this, args);
// 获取 Observer 实例
const ob = this.__ob__;
// 处理新增的元素 (对于 push, unshift, splice 方法)
let inserted;
switch (method) {
case 'push':
case 'unshift':
inserted = args;
break
case 'splice':
inserted = args.slice(2); // splice 的第三个参数开始才是要添加的元素
break
}
if (inserted) {
ob.observeArray(inserted); // 对新增的元素进行观测
}
// 触发更新
ob.dep.notify();
return result
}
});
});这段代码完成了数组方法的重写。让我们来仔细分析一下：
arrayProto和arrayMethods：arrayProto保存了原生的数组原型，arrayMethods是我们创建的新数组原型，它继承自arrayProto。methodsToPatch： 这是一个包含了所有需要重写的方法名的数组。forEach循环： 我们遍历methodsToPatch数组，对每个方法进行重写。original： 在循环中，我们用original变量保存了原生的数组方法。Object.defineProperty： 我们使用Object.defineProperty来定义新的方法。enumerable: false： 设置enumerable为false可以防止我们重写的方法被for...in循环遍历到。writable: true和configurable: true： 这两个属性保证了我们可以修改和删除我们重写的方法。value: function mutator (...args)： 这就是我们重写后的方法。它接收任意数量的参数。original.apply(this, args)： 这行代码调用了原生的数组方法，并把this指向当前的数组，把args作为参数传递给原生的方法。这样，我们就完成了数组的修改。const ob = this.__ob__： 这行代码获取了数组的 Observer 实例。每个被 Vue 监听的数组都会有一个__ob__属性，指向它的 Observer 实例。- 处理新增的元素： 对于
push,unshift,splice这三个方法，它们可能会向数组中添加新的元素。我们需要对这些新增的元素进行观测，让 Vue 能够监听到它们的变化。 ob.dep.notify()： 这行代码触发了更新。ob.dep是一个Dep实例，它负责收集依赖，并在数据变化时通知这些依赖进行更新。return result： 我们把原生的方法的返回值返回。
让数组“变身”：替换 __proto__
现在，我们已经有了重写后的数组方法，接下来，我们需要把它们“安装”到要监听的数组上。
function protoAugment (target, src, keys) {
target.__proto__ = src
}
function copyAugment (target, src, keys) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
// 这里的 value 是要监听的数组
function observeArray (value) {
for (let i = 0, l = value.length; i < l; i++) {
observe(value[i]); // 递归观测数组中的每个元素
}
}
class Observer {
constructor (value) {
this.value = value;
this.dep = new Dep(); // 依赖收集器
def(value, '__ob__', this); // 给数组添加 __ob__ 属性，指向 Observer 实例
if (Array.isArray(value)) {
// 如果浏览器支持 __proto__，就直接替换 __proto__
const augment = hasProto
? protoAugment
: copyAugment;
augment(value, arrayMethods, Object.keys(arrayMethods));
this.observeArray(value); // 观测数组中的每个元素
} else {
this.walk(value); // 观测对象
}
}
walk (obj) {
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i], obj[keys[i]]);
}
}
observeArray (items) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i]);
}
}
}这段代码是 Observer 类的核心部分。让我们来解读一下：
Observer类：Observer类的作用是对数据进行观测。它会递归地遍历对象的所有属性，并使用defineReactive函数把它们转换成响应式的。this.dep = new Dep()： 每个Observer实例都有一个Dep实例。Dep实例用于收集依赖，并在数据变化时通知这些依赖进行更新。def(value, '__ob__', this)： 这行代码给被观测的数据（对象或数组）添加了一个__ob__属性，指向它的Observer实例。这样，我们就可以在任何地方通过__ob__属性来访问到Observer实例。Array.isArray(value)： 判断当前观测的数据是否是数组。protoAugment和copyAugment： 这两个函数用于把我们重写后的数组方法“安装”到数组上。protoAugment函数直接修改数组的__proto__属性，这是最简单也是最有效的方式。但是，有些浏览器不支持直接修改__proto__属性，所以我们需要提供一个备选方案copyAugment。copyAugment函数会把我们重写后的方法一个一个地复制到数组上。this.observeArray(value)： 这行代码递归地观测数组中的每个元素。如果数组中的元素也是对象或数组，那么我们也要对它们进行观测。
总结：Vue 2 数组重写的意义
Vue 2 通过重写数组的七个方法，解决了 Object.defineProperty 无法监听数组元素修改的问题，实现了对数组的响应式监听。
这种做法虽然比较“hack”，但确实是 Vue 2 实现响应式系统的关键一步。它让 Vue 能够监听到数组的变化，从而实现响应式更新。
一些补充说明：
__proto__的兼容性： 虽然大部分现代浏览器都支持__proto__属性，但是为了兼容一些老旧的浏览器，Vue 2 也提供了copyAugment这种备选方案。- 性能问题： 有人可能会担心，重写数组方法会影响性能。但是，Vue 2 对重写后的方法进行了优化，尽量减少性能损耗。而且，只有当数组被观测时，才会进行重写。
- Vue 3 的改变： 在 Vue 3 中，使用了 Proxy 替代 Object.defineProperty，Proxy 可以直接监听数组的变化，所以就不需要重写数组方法了。
最后，来个小测验：
- Vue 2 中为什么需要重写数组方法？
- Vue 2 重写了哪些数组方法？
- Vue 2 是如何实现数组方法重写的？
- Vue 3 中为什么不需要重写数组方法了？
把你的答案写在评论区，看看谁能全部答对！
今天就讲到这里，希望大家有所收获！如果觉得有用，别忘了点个赞哦！下次再见！