Vue——对象和数组操作的注意事项
前言
Vue是响应式的,所谓的“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码。例如,视图渲染中使用了数据,数据改变后,视图也会自动更新。对于引用类型的数组和对象而言,如下操作Vue不能做出响应.
对于数组而言,Vue 不能检测以下变动:
- 当你利用索引直接设置一个项时,例如:
- 当你修改数组的长度时,例如:vm.items.length = newLength
var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的
对于对象而言,Vue不能检测以下变动:
- Vue 不能检测对象属性的添加或删除
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b = 2 // `vm.b` 不是响应式的
Vue对上述问题提供的解决方法
数组操作
1.对于数组的元素的修改和增加
// Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
2.对于数组的长度修改
vm.items.splice(newLength)
注意:array.splice(index,howmany,item1,.....,itemX);index:从数组的第几个下标开始操作;howmany:从index开始往后删除多少个元素;item1,...,itemX:新增元素
对象操作
//单个属性的操作 Vue.set(vm.userProfile, 'age', 27) //多个属性的操作 vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })