Vue - 如何重新渲染特定数组 object 更改而不重新渲染整个数组

Question

我一直在寻找这个答案很长一段时间。 终于发布了，因为我有与此相关的问题。

请检查下面的代码片段

<div>
    <template v-for="(row, index) in rows">
         <tr v-if="hasChildData(row, index)" :key="`row-${tabId}-${index}`">
              <!-- Rest of the logic -->
         </tr>
    </template>
</div>

方法

hasChildData(row, index) {
  console.log("Looping index: "+ index);
  return row.childData;
}

假设 rows 是一个数组并且有 5 个元素

data() {
    return {
      rows: [
        { test: 123 },
        { test: 345 },
        { test: 567 },
        { test: 789 },
        { test: 904 },
      ]
   };
}

我在某处尝试更新行数组中的特定行。 在这种情况下索引 3

setChildData() {
    Vue.set(this.rows[3], "childData", true);
}

为什么 Vue 会重新渲染整个循环。 有没有办法只重新渲染特定索引 3？ 这与Change specific index without re-render whole array in Vuejs 有关，但没有找到我正在寻找的答案。

Output 调用 setChildData() 后：

循环索引：0

循环指数：1

循环指数：2

循环指数：3

循环指数：4

虽然我期待

循环指数：3