Vue 中实现修改数组，并保持页面渲染数据是响应式更改

如果你在 Vue 中使用数组并希望确保对数组项的修改是响应式的，直接替换数组项可能不会触发 Vue 的响应式更新。为了确保响应式更新，你可以使用 Vue 提供的 Vue.set() 方法（在 Vue 2 中）或使用 this.$set() 方法（在 Vue 2 和 Vue 3 中的组合式 API）。

示例代码（Vue 2 和 Vue 3）

假设你在 Vue 组件中处理这个问题：

<template><div><button @click="updateCard">Update Card</button><div v-for="card in cards" :key="card.card_id">{{ card.name }}: {{ card.value }}</div></div>
</template><script>
export default {data() {return {cards: [{ card_id: 1, name: 'Card 1', value: 100 },{ card_id: 2, name: 'Card 2', value: 200 },{ card_id: 3, name: 'Card 3', value: 300 },],};},methods: {updateCard() {const targetCardId = 2;const newData = { name: 'Updated Card 2', value: 250 };// 查找 card_id 为 targetCardId 的项的索引const index = this.cards.findIndex(card => card.card_id === targetCardId);if (index !== -1) {// 使用 Vue.set() 或 this.$set() 确保响应式更新this.$set(this.cards, index, { ...this.cards[index], ...newData });// 或者在 Vue 3 中可以直接使用// this.cards[index] = { ...this.cards[index], ...newData };}},},
};
</script>

代码说明

1. 数据定义：在 data 中定义一个 cards 数组。
2. 更新方法：在 updateCard 方法中，查找特定 card_id 的索引。
3. 确保响应式更新：
   • 在 Vue 2 中，使用 this.$set(this.cards, index, newValue) 来替换数组项，确保 Vue 能够检测到变化。
   • 在 Vue 3 中，直接替换数组项通常是响应式的，但如果你在 Vue 2 中工作，使用 this.$set() 是必要的。

注意事项

• 在 Vue 3 中，使用 this.cards[index] = newValue 通常会保持响应式，因为 Vue 3 的响应式系统更为强大。
• 在 Vue 2 中，确保使用 this.$set() 来替换数组项，以确保 Vue 能够检测到变化并更新视图。

这样，你就可以确保在 Vue 中对数组项的修改是响应式的。