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

Posted 2023-02-16

【中文标题】更改特定索引而不在 Vuejs 中重新渲染整个数组

【英文标题】：Change specific index without re-render whole array in Vuejs

【发布时间】：2020-12-14 04:21:35

【问题描述】：

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

---

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

【问题讨论】：

你能添加到目前为止你尝试过的代码吗..

在我的朋友这个问题中，代码只解释了这些词

【参考方案1】：

在 Vue 1.x 中，我们有 track-by="$index" 来跟踪渲染数组中更改的索引。但是从 2.x 版本开始，当我们使用 v-for 而不是 track-by="$index" 渲染数组时，Vue 建议使用 :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();

【讨论】：

投反对票，因为这个（自我）答案的大部分都是错误的。首先：Vue 在上述数组更改后不更新视图的原因是当您直接设置具有索引的项目时，Vue 2 无法检测到更改 - 请参阅Change Detection Caveats For Arrays。第二：key 很重要，是的，但它不会改变这样一个事实，即如果您在模板中的数组上有 v-for，它总是呈现数组中的 所有 项。有关详细信息，请参阅my answer to similar question...