【Vue】向集合的头部添加元素

在 Vue 中，如果要向集合的头部添加元素，可以使用 JavaScript 的

unshift

方法或 Vue 的

$set

方法。

1. 使用 unshift 方法：

this.list.unshift(newElement);

1. 使用 $set 方法：

this.list.$set(0, newElement);

其中，

list

是要添加元素的集合，

newElement

是要添加的新元素，

0

是要添加元素的索引位置。

需要注意的是，如果要向 Vue 的响应式集合中添加新元素，建议使用

$set

方法或

splice

方法来通知 Vue 进行更新，而不是手动使用

push

或

unshift

等方法，否则新元素可能不会被响应式地更新到视图上。

push用法

push()

是 JavaScript 数组对象的一个方法，用于在数组的末尾添加一个或多个元素，其语法为：

array.push(item1, item2,...);

参数说明：

• item1, item2, ...：要添加到末尾的元素，必填。

下面是一些示例：

1. 添加单个元素：

let arr =[1,2,3,4,5];
arr.push(999);// 在末尾添加元素 999
console.log(arr);// [1, 2, 3, 4, 5, 999]

1. 添加多个元素：

let arr =[1,2,3,4,5];
arr.push(999,888,777);// 在末尾添加多个元素
console.log(arr);// [1, 2, 3, 4, 5, 999, 888, 777]

需要注意的是，

push()

方法会修改原数组，如果不需要修改原数组，可以先复制一份原数组，再使用

push()

方法。

splice用法

splice()

是 JavaScript 数组对象的一个方法，用于修改数组中的元素，可以实现添加、删除、替换等操作，其语法为：

array.splice(start, deleteCount, item1, item2,...);

参数说明：

• start：表示起始修改位置的索引值，必填。
• deleteCount：表示需要删除的元素个数，可选。如果设置为 0，则表示不删除元素，只添加元素。
• item1, item2, ...：要添加进数组的元素，可选。

下面是一些示例：

1. 删除元素：

let arr =[1,2,3,4,5];
arr.splice(2,1);// 删除下标为 2 的元素
console.log(arr);// [1, 2, 4, 5]

1. 添加元素：

let arr =[1,2,3,4,5];
arr.splice(2,0,999);// 在下标为 2 的位置添加元素 999
console.log(arr);// [1, 2, 999, 3, 4, 5]

1. 同时删除和添加元素：

let arr =[1,2,3,4,5];
arr.splice(2,1,999);// 删除下标为 2 的元素，并在该位置添加元素 999
console.log(arr);// [1, 2, 999, 4, 5]

需要注意的是，

splice()

方法会修改原数组，如果不需要修改原数组，可以先复制一份原数组，再使用

splice()

方法。

unshift的用法

unshift()

是 JavaScript 数组对象的一个方法，用于在数组的开头添加一个或多个元素，其语法为：

array.unshift(item1, item2,...);

参数说明：

• item1, item2, ...：要添加到开头的元素，必填。

下面是一些示例：

1. 添加单个元素：

let arr =[1,2,3,4,5];
arr.unshift(999);// 在开头添加元素 999
console.log(arr);// [999, 1, 2, 3, 4, 5]

1. 添加多个元素：

let arr =[1,2,3,4,5];
arr.unshift(999,888,777);// 在开头添加多个元素
console.log(arr);// [999, 888, 777, 1, 2, 3, 4, 5]

需要注意的是，

unshift()

方法会修改原数组，如果不需要修改原数组，可以先复制一份原数组，再使用

unshift()

方法。

为什么手动使用 push 或 unshift 等方法，新元素可能不会被响应式地更新到视图上？

在 Vue.js 中，数据响应式是通过使用

Object.defineProperty

方法来实现，从而使 Vue 对象能够捕捉到属性的变化并及时更新视图。这种方式只能监听到已经创建的属性，因此如果直接使用

push

,

unshift

,

splice

等 JavaScript 原生数组方法来操作数据，Vue.js 并不知道这种变化，不能对视图进行响应式更新。

Vue.js 提供了一个扩展方法

$set

，用于在已经创建的对象中添加新属性，该方法可以帮助 Vue.js 检测到新属性的添加并及时更新视图。因此，在 Vue.js 应用程序中，如果要使视图能够响应添加、删除或替换元素的变化，则最好使用

$set

方法来操作数组。

另外，Vue.js 也允许直接改变数组的特定索引的值，但是通过变更索引来更新数组仅仅更新了数组内容，并不会更新数组长度。如果需要更新数组长度，则需要使用

splice

方法来操作。

$set的用法

$set

是 Vue.js 提供的用于给数组或对象添加响应式属性的方法，其语法如下：

vm.$set(target, key, value)

参数说明：

• target：必填，要添加属性的数组或对象；
• key：必须，要添加的属性名；
• value：必须，要添加的属性值。

下面是一些示例：

1. 给数组添加属性：

let arr =[1,2,3,4,5];this.$set(arr,2,999);// 修改 arr 下标为 2 的值为 999
console.log(arr);// [1, 2, 999, 4, 5]

1. 给对象添加属性：

let obj ={name:'Tom',age:18};this.$set(obj,'address','beijing');// 给 obj 添加属性 address，并赋值为 beijing
console.log(obj);// {name: "Tom", age: 18, address: "beijing"}

需要注意的是，

$set

方法只能为已存在的对象或数组添加属性，而不能添加新的对象或数组。因此，如果需要添加新的对象或数组，则可以使用普通的 JavaScript 方法，但需要调用

$forceUpdate

方法来刷新组件视图。