Vue响应式更新数据分为两种情况: 数组和对象
数组
不响应的情况
- 用引用直接设置数组项
vm.items[indexOfItem] = newValue
- 修改数组的长度
vm.items.length = newLength
解决方案
- splice
vm.items.splice(indexOfItem, 1, newValue)
- $set (不建议使用)
vm.$set(items, indexOfItem, newValue)
- 可以触发响应式的数组方法
push pop shift unshift splice sort reverse
对象
不响应的情况
- 添加属性
Object.NewKey = NewValue
- 删除属性
delete myObject.Nam
解决方案
- Object.assign
vm.someObject = Object.assign({}, vm.someObject, { a: 1, b: 2 })
- $set (不建议使用)
vm.$set(target, propertyName, NewValue)
- $delete
vm.$delete(target, propertyName/index)