ES6（ECMAScript 2015）中的 扩展运算符（Spread Operator）

... 在 Vue 3 中是 ES6（ECMAScript 2015）中引入的扩展运算符（Spread Operator）。扩展运算符可以用于数组或对象，允许将一个数组或对象中的元素展开到另一个数组或对象中。在 Vue 3 中，这个运算符通常用于模板中的列表渲染、组件传参、合并数组或对象等场景。

在数组中的使用

1. 复制数组

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

这里，copiedArray 是 originalArray 的一个浅拷贝。

2. 合并数组

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];

combinedArray 将是 [1, 2, 3, 4, 5, 6]。

3. 在函数调用中使用

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers);

这里，sum 函数会被调用为 sum(1, 2, 3)。

4. 在 Vue 模板中的列表渲染

<template>
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    };
  }
}
</script>

如果你需要将另一个数组的项也渲染到列表中，可以使用扩展运算符：

<template>
  <ul>
    <li v-for="item in [...items, ...additionalItems]" :key="item">{{ item }}</li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      items: [1, 2, 3],
      additionalItems: [4, 5, 6]
    };
  }
}
</script>

在对象中的使用

扩展运算符也可以用于对象，用于复制或合并对象：

const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const combinedObject = { ...object1, ...object2 };

combinedObject 将是 { a: 1, b: 2, c: 3, d: 4 }。

注意事项

• 扩展运算符进行的是浅拷贝，如果数组或对象中包含引用类型（如数组、对象），那么复制的是引用，而不是创建新的对象。
• 在合并对象时，如果两个对象中有相同的属性，后者的属性值会覆盖前者的属性值。
  扩展运算符是现代 JavaScript 中非常强大和灵活的工具，在 Vue 3 中可以大大简化数组或对象的操作。