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

Question

在 Vuejs 项目中，我的 数据对象 中有一个 array 并渲染它在视图中带有 v-for 指令。现在，如果我更改该数组中的特定索引，Vue 会重新渲染视图中的整个数组。有没有什么方法可以在不重新渲染整个数组的情况下查看视图的变化？

这个问题背后的原因是我的数组的其他索引正在处理或做某事，当整个数组重新呈现在视图中时，这些过程停止了。

Answer 1

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

在<template>中：

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

在<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();
}

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

Change specific index without re-render whole array in Vuejs

vue.js

vuejs2

v-for