一、Vue中删除数组元素的基本方法
Vue中删除数组元素的基本方法是通过JavaScript中的splice方法，该方法可用于向数组中添加或删除元素。
/**
* 第一个参数：指定要添加/删除的起始位置索引
* 第二个参数：指定要删除的元素的个数，如果是添加则该参数设置为0
* 后面参数：要添加的元素，可以添加多个，这些元素将插入到数组中
*/
array.splice(start,deleteCount,add1,add2,...);
例如：
let arr = [1, 2, 3, 4, 5];
//删除索引为2的元素
arr.splice(2, 1);
console.log(arr); //[1, 2, 4, 5]
在Vue中可以通过v-bind或:绑定数据到数组中，v-for循环渲染数据。例如：
<template>
<div>
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4, 5]
}
}
}
</script>
当需要删除数组中某个元素时，直接在Vue中调用splice方法即可，如下所示：
<template>
<div>
<ul>
<li v-for="(item,index) in list" :key="index">
{{item}}
<button @click="removeItem(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4, 5]
}
},
methods: {
removeItem(index) {
this.list.splice(index, 1);
}
}
}
</script>
该方法能够实现在Vue中删除数组中某个元素的功能。
二、Vue实现数组删除后响应式更新
上述方法虽然能够实现删除数组中某个元素的需求，但是不会触发Vue的响应式更新，影响数据的界面不一致。解决该问题的方法是使用Vue提供的set或者splice方法，这些方法能够触发响应式更新，实现数据的一致性。
首先介绍set方法，在Vue中set方法有两种用法，一种是对于对象（Object），另一种是对于数组（Array），以下将分别进行介绍。
对于对象，set方法的用法如下：
// Vue.set(object,key,value);
Vue.set(vm.obj, 'key', 'value');
// 或者
vm.$set(vm.obj, 'key', 'value');
例如，现有一个对象obj，需要动态添加属性name并赋值为“vue”：
let obj = { age: 18 };
Vue.set(obj, 'name', 'vue');
console.log(obj); //{age: 18, name: "vue"}
对于数组，set方法的用法与splice差不多，只是第二个参数要指定具体的属性名，而不是要删除的元素个数，详见下例：
// Vue.set(array,index,value);
Vue.set(vm.list, 2, 'vue');
// 或者
vm.$set(vm.list, 2, 'vue');
例如，现有一个数组list，需要将下标为2的元素替换为“vue”：
let list = [1, 2, 3, 4, 5];
Vue.set(list, 2, 'vue');
console.log(list); //[1, 2, "vue", 4, 5]
同样的效果也可以使用splice方法实现：
// vm.list.splice(index,deleteCount,add1,add2,...);
vm.list.splice(2, 1, 'vue');
下面详细介绍splice方法对于数组删除元素后响应式更新的方法，以JavaScript代码实现Vue的Array.prototype.$remove方法为例。
Vue.prototype.$remove = function (item) {
if (!item) {
return;
}
var index = this.indexOf(item);
if (index > -1) {
this.splice(index, 1);
}
};
上述代码中，Vue原型上新增了一个$remove方法，该方法接收一个参数item，表示需要删除的元素。首先判断该参数是否为空，如果为空则直接返回，否则获取该元素在数组中的索引index，如果索引存在则调用splice方法删除该元素。
使用上述的$remove方法，Vue中删除数组元素就能够触发响应式的界面更新了，同时保持数据的一致性。在Vue中删除数组元素也可以使用JavaScript数组的过滤方法实现，下面将具体介绍。
三、使用Vue的数组过滤方法删除元素
Vue提供了数组的过滤方法，可以通过该方法快速的从数组中删除特定的元素。Vue提供了一个$delete方法用于在items数组中删除元素。该方法接收两个参数，第一个参数是items数组，第二个参数为需要删除的元素索引值。
下面通过代码的方式进行演示：
new Vue({
el: '#app',
data: {
items: ['vue', 'react', 'angular']
},
methods: {
deleteItem(index) {
this.$delete(this.items, index)
}
}
})
在上述代码中，click事件将会返回元素的索引值并调用deleteItem方法从数组中删除元素。
四、使用splice方法删除多个元素
Vue提供了使用splice方法删除多个元素
new Vue({
el: '#app',
data: {
items: ['javascript', 'go', 'c++', 'java', 'php']
},
methods: {
removeItems() {
this.items.splice(1,2) //从index=1开始删除两个元素，即删除go和c++
}
}
})
上述代码中，click事件将会根据用户的选择删除元素。
五、总结
对于Vue中删除数组元素，可以使用JavaScript中的splice方法、使用Vue提供的set或者splice方法来实现，也可以使用Vue的数组过滤方法快速的从数组中删除特定的元素，或使用splice方法删除多个元素。通过以上几种方法，可以让Vue在删除数组元素时能够实现响应式更新，同时保持数据的一致性。