Vue 3 数组变更详解：哪些操作会修改原数组？| 笔记

Vue 3 使用 Proxy 来侦测响应式对象的变化，数组作为常用数据类型，自然也被 Vue 3 自动侦测和管理。在处理数组时，了解哪些操作会修改原数组，哪些操作不会修改原数组，对高效编写 Vue 应用程序至关重要。

本文将详细介绍 Vue 3 中的常见数组操作，并按照是否会修改原数组进行分类说明。

一、会修改原数组的方法

这些方法会直接改变原数组的内容，因此 Vue 3 的响应式系统能检测到这些变更，并自动触发相关的视图更新。

1. `push()`

功能：向数组末尾添加一个或多个元素。
返回值：新数组的长度。

示例：

const arr = reactive([1, 2, 3]);
arr.push(4); // 数组变为 [1, 2, 3, 4]

2. `pop()`

功能：移除数组末尾的一个元素。
返回值：被移除的元素。

示例：

const arr = reactive([1, 2, 3]);
arr.pop(); // 数组变为 [1, 2]

3. `shift()`

功能：移除数组开头的一个元素。
返回值：被移除的元素。

示例：

const arr = reactive([1, 2, 3]);
arr.shift(); // 数组变为 [2, 3]

4. `unshift()`

功能：在数组开头添加一个或多个元素。
返回值：新数组的长度。

示例：

const arr = reactive([1, 2, 3]);
arr.unshift(0); // 数组变为 [0, 1, 2, 3]

5. `splice()`

功能：在数组中添加、删除或替换元素。
返回值：被删除的元素（如果有）。

示例：

const arr = reactive([1, 2, 3, 4]);
arr.splice(1, 2); // 删除索引 1 开始的两个元素，数组变为 [1, 4]

6. `sort()`

功能：对数组元素进行原地排序。
返回值：排序后的数组。

示例：

const arr = reactive([3, 1, 4, 2]);
arr.sort(); // 数组排序后为 [1, 2, 3, 4]

7. `reverse()`

功能：颠倒数组元素的顺序。
返回值：颠倒后的数组。

示例：

const arr = reactive([1, 2, 3]);
arr.reverse(); // 数组变为 [3, 2, 1]

二、不会修改原数组的方法

这些方法不会直接修改原数组，而是返回一个新的数组或值。因此，Vue 3 响应式系统不会通过这些方法本身侦测到数组的变化，但如果将它们的返回值重新赋值给响应式对象，Vue 仍然能侦测到变更并更新视图。

1. `concat()`

功能：合并两个或多个数组，返回一个新数组。
返回值：合并后的新数组。

示例：

const arr = reactive([1, 2]);
const newArr = arr.concat([3, 4]); // 新数组为 [1, 2, 3, 4]

2. `slice()`

功能：返回数组中指定范围的浅拷贝片段，不修改原数组。
返回值：新数组。

示例：

const arr = reactive([1, 2, 3, 4]);
const slicedArr = arr.slice(1, 3); // 新数组为 [2, 3]

3. `map()`

功能：对数组中的每个元素执行回调函数，返回一个新数组。
返回值：经过回调函数处理后的新数组。

示例：

const arr = reactive([1, 2, 3]);
const mappedArr = arr.map(x => x * 2); // 新数组为 [2, 4, 6]

4. `filter()`

功能：返回满足条件的元素组成的新数组。
返回值：筛选后的新数组。

示例：

const arr = reactive([1, 2, 3, 4]);
const filteredArr = arr.filter(x => x > 2); // 新数组为 [3, 4]

5. `reduce()` 和 `reduceRight()`

功能：对数组中的每个元素执行回调函数，最终返回一个累积结果。
返回值：累积结果。

示例：

const arr = reactive([1, 2, 3]);
const sum = arr.reduce((acc, x) => acc + x, 0); // 返回累积值 6

6. `flat()` 和 `flatMap()`

功能：返回一个扁平化后的新数组。
返回值：新数组。

示例：

const arr = reactive([1, [2, 3], [4]]);
const flattenedArr = arr.flat(); // 新数组为 [1, 2, 3, 4]

7. `find()` 和 `findIndex()`

功能：find() 返回第一个满足条件的元素，findIndex() 返回满足条件元素的索引。
返回值：find() 返回元素，findIndex() 返回索引。

示例：

const arr = reactive([1, 2, 3, 4]);
const foundItem = arr.find(x => x > 2); // 返回 3

三、Vue 3 数组侦测的注意事项

自动侦测修改：对于会修改原数组的方法（如 push()、splice() 等），Vue 3 能够自动侦测到这些操作并触发视图更新。
不会修改原数组的操作：虽然这些方法不会修改原数组，但如果你将它们的返回值重新赋值给响应式对象，Vue 依然会检测到变化并更新视图。例如：
```
const arr = reactive([1, 2, 3]);
arr = arr.concat([4, 5]); // Vue 会检测到重新赋值并触发更新
```

对象属性变化侦测：如果数组中包含对象，Vue 3 也能侦测到对象属性的变化。例如：

const arr = reactive([{ name: 'Alice' }, { name: 'Bob' }]);
arr[0].name = 'Eve'; // Vue 会侦测到对象属性的变化

四、总结

会修改原数组的方法：push()，pop()，shift()，unshift()，splice()，sort()，reverse()。
不会修改原数组的方法：concat()，slice()，map()，filter()，reduce()，flat()，find() 等。