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

编程问答 2022-08-14

问题描述

在 Vuejs 项目中，我的数据对象中有一个数组，并使用v-for指令将其呈现。现在，如果我更改该数组中的特定索引，Vue将在视图中重新渲染整个数组。有什么方法可以查看视图中的更改而无需重新渲染整个数组？

这个问题背后的原因是我数组的其他索引正在处理或执行某项操作，并且当整个数组重新呈现时，这些进程就会停止。

解决方法

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

在<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();
}
arraysarraysarraysv-forvue.js