Vue 改变数组触发视图更新

以下方法调用会改变原始数组

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

push()

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

example1.items.push({ message: 'Baz' })

pop()

pop() 方法用于删除最后一个元素,把数组长度减 1,并且返回它删除的元素的值。

shift()

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

unshift()

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

splice()

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。 该方法会改变原始数组。

sort()

sort() 方法用于对数组的元素进行排序。

reverse()

reverse() 方法用于颠倒数组中元素的顺序。

set()

Vue.set() 响应式新增与修改数据

调用方法:Vue.set( target, key, value )
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value :重新赋的值

Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
// Vue.set()在methods中也可以写成this.$set()

以下方法调用不会改变原始数组

filter(), consat(), slice() 他们返回的是一个新数组,使用这些方法时,可以用新数组来替换原始数组

猜你喜欢

转载自blog.csdn.net/gqzydh/article/details/81448978