Vue-数组中的响应式方法-push pop shift unshift splice sort resourse

一、vue中数组中的响应式的方法

push pop shift unshift splice sort resourse

1.push() 数组尾添加一个元素

letters: ['a', 'b', 'c', 'd']
this.letters.push('aaa')
this.letters.push('aaaa', 'bbbb', 'cccc')

letters:['a', 'b', 'c', 'd','aaaa','bbbb','cccc']

2.pop() 删除数组中的最后一个元素

letters: ['a', 'b', 'c', 'd']
this.letters.pop()

letters:['a', 'b', 'c']

3.shift() 删除数组中的第一个元素

letters: ['a', 'b', 'c', 'd']
this.letters.shift()

letters:['b', 'c', 'd']

4.unshift() 在数组最前面添加元素

letters: ['a', 'b', 'c', 'd']
this.letters.unshift()
this.letters.unshift('1','2')

letters:['1','2','a', 'b', 'c', 'd']

5.sort() 排序

this.letters.sort()

6.resourse() 数组反转

let letters = [1,2,3,4]
this.letters.reverse()

letters = [4,3,2,1]

二.修改数组不会响应式变化的情况

通过数组下标修改数组时，页面不会发生响应式的改变：

this.letters[0] = 'aaaa'

可以通过Vue.set()来对数组改变，可以响应式的改变

Vue.set(要修改的对象, 索引值, 修改后的值)

let letters = [1,2,3,4]
Vue.set(this.letters,0,'a')

letters = ['a',2,3,4]