vue数组和对象响应式杂谈

Posted 2023-05-02

参考技术A arr[i] = xxx和arr.length = len：这两种方式都不会立刻触发响应式

Vue不能检测对象属性的添加、删除（仅此而已，可直接对该对象重新赋值、修改该对象或内层对象的属性）

也就是说已经有了一个对象，如果我们手动给对象增加属性，或者删除属性，那么vue检测不到变化。

一般我们删除对象某个属性，使用 delete obj.xx ，这种删除操作不会触发响应式，但是如果我们需要删除操作是响应式的，可以使用

vue对象数组响应式——$set||splice

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

对于对象$set：
this.$set(object, propertyName, value)
this.$set(this.activeData, 'format', val)

对于数组$set||splice
var vm = new Vue(
  data:
    items: ['a', 'b', 'c']
  
)
vm.items[1] = 'x' // 不是响应性的---通过下标改变值
vm.items.length = 2 // 不是响应性的---改变数组长度

this.$set(vm.items, indexOfItem, newValue)
this.items.splice(indexOfItem, 1, newValue)
this.items.splice(newLength)