Vue响应式更新数据

156 阅读1分钟

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)