Vue中数组操作的响应式方法

假设data中定义一个数组letters:['a','b','c','d']

1. push方法

数组末尾添加元素

this.letters.push('aaa') // 添加单个
this.letters.push('aaa','bbb','ccc') // 添加多个

2. pop方法

删除数组中最后一个元素

this.letters.pop()

3. shift方法

删除数组中第一个元素

this.letters.shift()

4. unshift方法

在数组最前面添加元素

this.letters.unshift('aaa') // 添加单个
this.letters.unshift('aaa','bbb','ccc') // 添加多个

5. splice方法

删除元素 / 插入元素 / 替换元素

• 删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有元素）
• 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
• 插入元素：第二个参数，传入0，并且后面跟上要插入的元素

this.letters.splice(1, 3, 'm', 'n', 'l') // 从第一个位置开始，替换三个元素
this.letters.splice(1, 0, 'x', 'y', 'z') // 从第一个位置开始，插入三个元素

6. sort()

排序

this.letters.sort()

7. reverse()

倒转

this.letters.reverse()

注意：this.letters[0] = ‘bbbb’，不是响应式的，建议使用splice方法。