Vue3 Composition API中如何更新响应式数组内对象属性

在Vue 3 Composition API中，你完全不需要通过重新赋值数组来触发重渲染——直接修改对象的已有属性即可自动触发响应式更新，这是性能最优的方式。

核心原理 #

用ref创建的数组，其内部的对象会被Vue自动处理为深度响应式结构。当你修改对象的已有属性时，Vue的响应式系统会自动追踪到这个变化，并触发组件重渲染，无需额外操作。

优化后的代码 #

<template>
  <div>
    <div v-for="item in arr" :key="item.id">
      {{ item.name }}
      <button @click="updateName(item)">Update Name</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const arr = ref([
  { id: 1, name: 'Object 1' },
  { id: 2, name: 'Object 2' },
]);

const updateName = (item) => {
  // 直接修改对象属性即可触发响应式更新
  item.name = `Updated ${item.name}`;
  
  // 若需通过id定位对象修改，同样无需重新赋值数组
  // const target = arr.value.find(e => e.id === item.id);
  // if (target) target.name = 'Object 3';
};
</script>

特殊场景补充 #

如果需要给对象新增属性（而非修改已有属性），才需要使用Vue.set或通过索引更新的方式，但你的场景是修改已有属性，因此不需要额外处理。

内容的提问来源于stack exchange，提问作者Elie Asmar