Jul
10
详解VUE数组更新
tommyhu , 09:17 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(585) , Via Original
Large | Medium | Small


1、数据方法分类:
(1)原数组改变
push
pop
unshift
shift
reverse
sort
splice
(2)原数组未变,生成新数组
slice
concat
filter
对于使原数组变化的方法,可以直接更新视图。
对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化。
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组。
当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新:
▲返回顶部
(1)原数组改变
push
pop
unshift
shift
reverse
sort
splice
(2)原数组未变,生成新数组
slice
concat
filter
对于使原数组变化的方法,可以直接更新视图。
对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化。
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组。
当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新:
▲返回顶部
