vue中splice方法总结

在Vue中，splice方法是JavaScript数组原生方法的一种，主要用于添加、删除或替换数组元素。Vue对数组的splice方法进行了响应式处理，使得在数组发生变化时，Vue能够自动跟新视图。

1. 基本用法

let vm = new Vue({
  data: {
    items: ['a', 'b', 'c', 'd']
  }
})
 
//删除元素，从索引1开始，删除一个元素
vm.items.splice(1, 1)
//结果：['a', 'c', 'd']
 
//添加元素，从索引1开始，删除0个元素，添加'x'和'y'
vm.items.splice(1, 0, 'x', 'y')
//结果：['a', 'x', 'y', 'c', 'd']
 
//替换元素，从索引1开始，删除1个元素，添加'x'
vm.items.splice(1, 1, 'x')
//结果：['a', 'x', 'y', 'd']

2. Vue.set 和 splice 结合使用

Vue不能检测到以下数组的变化：

• 当你利用索引直接设置一个项时，例如：vm.items[0] = 'x'
• 当你修改数组的长度时，例如：vm.items.length = 0

为了解决这些问题，Vue提供了一个全局的方法Vue.set，它可以在对象的属性或者数组的索引上设置一个响应式的属性。

// 使用Vue.set设置数组索引
Vue.set(vm.items, indexOfItem, newValue)
 
// 或者使用splice结合Vue.set
vm.items.splice(indexOfItem, 1, newValue)

3. Vue.delete 方法

另一种方式是使用Vue提供的Vue.delete方法，它可以删除数组中的元素，并确保触发视图更新。

// 使用Vue.delete删除数组元素
Vue.delete(vm.items, indexOfItem)

注意：在Vue 2.x中，Vue.set和Vue.delete主要用于obsorve数组，但在Vue 3.x中，Vue.set已经被移除，只能使用splice和delete运算符来改变数组。

// Vue 3.x 使用delete运算符删除数组元素
delete vm.items[indexOfItem]
 
// 或者使用splice方法
vm.items.splice(indexOfItem, 1)

总结：在Vue中，splice方法是用于添加、删除或替换数组元素的原生JavaScript方法。Vue对其进行了响应式处理，使得在数组发生变化时，视图能够自动更新。为了确保Vue能够检测到数组的变化，应当使用Vue.set、Vue.delete或splice方法，而不是直接修改数组。