Vue3中如何用过滤后的数组更新对象数组响应式状态？

问题原因 #

你用reactive创建的响应式数组，直接给变量users重新赋值会丢失响应性。因为reactive返回的是代理对象，执行users = filteredUsers后，users会指向普通数组，Vue无法追踪这个变量的指向变化，导致视图不更新。

解决方案 #

方案1：修改原数组（推荐）

通过splice直接操作原响应式数组，保持代理对象的引用不变：

const onUserDelete = (userId) => {
  const targetIndex = users.findIndex(user => user.id === userId);
  if (targetIndex !== -1) {
    users.splice(targetIndex, 1);
  }
}

方案2：将数组包裹在reactive对象中

把数组放在一个响应式对象里，修改对象的属性时能维持响应性：

import { reactive } from 'vue';

const state = reactive({
  users: []
});

const onUserDelete = (userId) => {
  state.users = state.users.filter(user => user.id !== userId);
}

模板中对应修改为：

<UsersTable v-if="state.users.length > 0" :users="state.users" @on-user-delete="onUserDelete" />

方案3：改用ref定义数组

ref支持直接重新赋值，Vue会自动处理响应性：

import { ref } from 'vue';

let users = ref([]);

const onUserDelete = (userId) => {
  users.value = users.value.filter(user => user.id !== userId);
}

模板无需额外修改，Vue会自动为ref解包。

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