Vue.js中通过索引修改数组grid项未触发响应式更新问题

这是Vue 2的响应式机制固有局限：Vue 2无法拦截通过数组索引直接赋值的操作，也无法监听数组长度的直接修改。你代码中this.grid[C] = !this.grid[C]这类索引直接改值的写法，虽然JS层面数组本身的值确实被修改了（所以console.log能打印出正确结果），但Vue的响应式系统根本没捕获到这个变更，自然不会触发视图重渲染。

任选以下一种方式修改即可触发响应式更新：

方案1：用$setAPI修改（最推荐） #

$set是Vue官方提供的专门用来触发响应式更新的API，适合修改数组指定索引项、给响应式对象新增属性的场景，直接替换你toggle方法里的赋值逻辑就行：

toggle(index) {
  const C = index
  const N = index - this.size >= 0 ? index - this.size : null
  const E = (index + 1) % this.size != 0 ? index + 1 : null
  const S = index + this.size < this.size * this.size ? index + this.size : null
  const W = index % this.size != 0 ? index - 1 : null

  this.$set(this.grid, C, !this.grid[C])
  if (N) this.$set(this.grid, N, !this.grid[N])
  if (E) this.$set(this.grid, E, !this.grid[E])
  if (S) this.$set(this.grid, S, !this.grid[S])
  if (W) this.$set(this.grid, W, !this.grid[W])

  console.log(this.grid)
}

方案2：整体替换数组引用 #

Vue 2可以监听到数组的整体赋值操作，你可以先拷贝原数组，在新数组上完成所有修改后，再把grid整体替换为新数组：

toggle(index) {
  const C = index
  const N = index - this.size >= 0 ? index - this.size : null
  const E = (index + 1) % this.size != 0 ? index + 1 : null
  const S = index + this.size < this.size * this.size ? index + this.size : null
  const W = index % this.size != 0 ? index - 1 : null

  const newGrid = [...this.grid]
  newGrid[C] = !newGrid[C]
  if (N) newGrid[N] = !newGrid[N]
  if (E) newGrid[E] = !newGrid[E]
  if (S) newGrid[S] = !newGrid[S]
  if (W) newGrid[W] = !newGrid[W]
  this.grid = newGrid

  console.log(this.grid)
}

方案3：调用数组变异方法 #

Vue 2重写了数组的splice、push、pop、shift、unshift、sort、reverse方法，调用这些方法修改数组时会自动触发视图更新，你可以用splice替换指定索引的项：

// 例：修改C位置的元素
this.grid.splice(C, 1, !this.grid[C])
// 其余几个位置的修改逻辑同理，把直接索引赋值换成splice调用即可

补充：这个数组索引修改不响应的问题在Vue 3中已经被彻底解决，Vue3基于Proxy实现响应式，可以正常拦截索引赋值操作，不需要上述特殊写法。

内容的提问来源于stack exchange，提问作者Razvan Nuna