Vue组件数组对象数据变更时计算属性未重新渲染问题咨询

当组件data中存储的数组对象类型值发生变更时，对应的计算属性未触发更新。

下方示例中实现了一个加载了不同状态带标题任务数据的表格，选中某条任务后点击「CHANGE TASK INFO」按钮，会将选中的当前任务修改为如下内容：

{
    Status: 'QA Review',
    Title: 'TEST'
}

若注释代码第99、100行，取消第96行的注释，此时再选中不同任务点击按钮，组件的tasks变量中的任务数据会正常更新，但对应的计算属性始终不会触发重新渲染。

该问题由Vue 2.x 响应式系统的原生限制导致：
Vue 2 在组件初始化阶段会通过Object.defineProperty对data中声明的所有已有属性绑定getter/setter，实现数据变更的响应式监听，但以下两类数组修改操作无法被Vue 2的响应式系统检测：

• 直接通过数组下标修改指定位置的元素，例如 this.tasks[index] = newTaskObj
• 直接修改数组的length属性，例如 this.tasks.length = 0

你取消注释的第96行代码就是通过数组下标直接赋值修改数组元素，Vue 2的响应式系统监听不到该变更，因此即使数组实际值已经更新，依赖该数组的计算属性也不会触发重新计算，视图也不会同步更新。
原本生效的第99、100行代码是直接修改数组中已有响应式对象的Status和Title属性，这两个属性在初始化阶段已经被绑定了响应式setter，因此修改后可以正常触发响应式更新。

你可以任选以下任意一种方案修改代码，即可触发正常的响应式更新：

• 使用Vue官方提供的$set方法修改数组指定位置的元素：

  this.$set(this.tasks, selectedTaskIndex, newTaskObj)
  

• 使用数组的splice原生方法替换对应位置的元素，Vue 2对数组的7个变异方法（push/pop/shift/unshift/splice/sort/reverse）都做了响应式劫持，修改后可正常触发更新：

  this.tasks.splice(selectedTaskIndex, 1, newTaskObj)
  

• 先拷贝完整数组，修改拷贝后数组对应下标的值，再将新数组整体赋值给tasks：

  const newTasks = [...this.tasks]
  newTasks[selectedTaskIndex] = newTaskObj
  this.tasks = newTasks
  

内容的提问来源于stack exchange，提问作者Kaloyan Nikolov