更改特定索引而不在 Vuejs 中重新渲染整个数组

In a Vuejs项目，我有一个array in my 数据对象并将其呈现在视图中v-for指示。现在，如果我更改该数组中的特定索引，Vue 会在视图中重新渲染整个数组。有没有办法在不重新渲染整个数组的情况下查看视图的变化？

这个问题背后的原因是我的数组处理或执行某些操作的其他索引，当整个数组在视图中重新渲染时，这些进程将停止。

在 Vue 1.x 中我们有track-by="$index"跟踪渲染数组中更改的索引。但从 2.x 版本开始，Vue 建议使用:key当我们在视图中渲染数组时v-for intead track-by="$index"。但考虑一下这个打击示例：

In <template> :

<div v-for="(doc, i) in docs" :key="i">
 <h4>{{ doc.status }}</h4>
 <button @click="reject(i)"> Reject </button>
</div>

In <script> :

data: {
 docs: [
  { status: 'pending' },
  { status: 'pending' },
  { status: 'pending' }
 ]
},

methods: {
 reject(index) {
  this.docs[index] = { status: 'rejected' }
 }
}

在这个例子中，当我们更改索引时，虽然数组发生了变化，但我们在视图中看不到任何变化。这是因为我们的组件之前渲染过，我们需要更新它的视图。为此我们需要使用this.$forceUpdate()在我们更新组件的方法中。

reject(index) {
 this.docs[index] = { status: 'rejected' }
 this.$forceUpdate();
}