Vue2 数组变化检测的限制与解决方案

Vue2 为什么不能检测数组索引变化，以及如何解决数组和对象的响应式问题

问题

Vue2 对响应式数据的实现存在两个限制：无法检测数组/对象的新增属性，无法检测通过索引改变数组的操作（如 vm.items[0] = newValue）。

解答

为什么无法检测数组/对象的新增

Vue2 通过 Object.defineProperty 实现数据监听，在构造函数中为已有属性绑定监听。因此无法监听后续新增的属性。

通过索引改变数组真的不能监听吗

实际上 Object.defineProperty 可以监听数组索引变化。测试代码：

function defineReactive(data, key, value) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function defineGet() {
      console.log(`get key: ${key} value: ${value}`)
      return value
    },
    set: function defineSet(newVal) {
      console.log(`set key: ${key} value: ${newVal}`)
      value = newVal
    }
  })
}

let arr = [1, 2, 3]
arr.forEach((val, index) => {
  defineReactive(arr, index, val)
})

arr[1] = 5 // 触发 set，说明可以监听

Vue2 没有实现数组索引监听是出于性能考虑。对象属性数量有限，遍历成本低；但数组可能包含成千上万个元素，每次变更都遍历会严重影响性能。Vue3 使用 Proxy 后解决了这个问题。

解决方案

数组变更：

使用 this.$set

this.$set(this.dataArr, 0, {data: '修改第一个元素'})
// 注意：这会同时修改源数组

使用 splice 方法

// splice 已被 Vue 重写，具有响应式
this.dataArr.splice(0, 1, {data: 'new value'})

使用临时变量

let tempArr = [...this.targetArr]
tempArr[0] = {data: 'test'}
this.targetArr = tempArr

对象变更：

使用 this.$set 实现增、改

this.$set(this.obj, 'newKey', 'value')

使用 deep: true 深度监听（只能监听属性值变化，无法监听新增/删除）

this.$watch('blog', this.getCatalog, {
  deep: true
})

直接监听某个属性

watch: {
  'obj.name'(curVal, oldVal) {
    // 处理逻辑
  }
}

关键点

Vue2 使用 Object.defineProperty 实现响应式，只能监听已存在的属性
技术上可以监听数组索引变化，但 Vue2 出于性能考虑未实现
数组变更推荐使用 $set、splice 或变异方法（push、pop、shift、unshift、sort、reverse）
对象新增属性使用 $set，或通过 watch 配置 deep: true 监听嵌套变化
Vue3 使用 Proxy 彻底解决了这些限制