在 Vue 3 中，直接对 reactive([]) 数组赋值（如 users = filteredUsers）会丢失响应性；必须使用 .value 赋值（ref）、原地修改（splice/push）或重置数组内容，才能确保视图同步更新。
在 vue 3 中，直接对 `reactive([])` 数组赋值（如 `users = filteredusers`）会丢失响应性；必须使用 `.value` 赋值（`ref`）、原地修改（`splice`/`push`）或重置数组内容，才能确保视图同步更新。
在 Vue 3 组合式 API 中，正确更新响应式数组状态是开发高频场景，但也是常见陷阱区——尤其当开发者试图用“替换整个数组”的方式实现过滤删除时，极易因破坏响应式连接而导致 UI 不更新。根本原因在于：reactive() 创建的对象仅对其自有属性的变更（如 push、splice、索引赋值）进行代理追踪，而 users = filteredUsers 是对变量标识符的重新赋值，完全脱离了原始响应式对象的响应系统。
以下是三种经过实践验证的可靠方案，按推荐优先级与性能表现排序：
✅ 推荐方案一：使用 ref + .value 赋值（语义清晰、安全可靠）
<script setup>
import { ref } from 'vue'
const users = ref([])
const onUserDelete = (userId) => {
users.value = users.value.filter(user => user.id !== userId)
}
</script>- 优势：语义明确（ref 天然支持整体替换），无需关心原地操作细节，兼容所有数组变换逻辑（filter/map/sort 等）；
- 注意：务必通过 .value 访问和赋值，否则无法触发响应更新；
- 适用场景：数据量中等、逻辑复杂、强调可读性与维护性的项目。
✅ 推荐方案二：reactive + 原地 splice（零内存开销、高性能）
<script setup>
import { reactive } from 'vue'
const users = reactive([])
const onUserDelete = (userId) => {
const index = users.findIndex(user => user.id === userId)
if (index > -1) {
users.splice(index, 1) // 直接修改原数组，响应式自动生效
}
}
</script>- 优势：不创建新数组，无 GC 压力，适合高频操作或大数据量列表；
- 关键点：必须使用 findIndex 定位后调用 splice，避免 filter 后赋值导致响应丢失；
- 注意：splice 是 Vue 3 显式支持的响应式数组方法之一（同 push/pop/shift/unshift/sort/reverse）。
⚠️ 备选方案三：reactive + 清空再填充（兼容但低效）
<script setup>
import { reactive } from 'vue'
const users = reactive([])
const onUserDelete = (userId) => {
const filtered = users.filter(user => user.id !== userId)
users.length = 0 // 清空原数组（响应式）
users.push(...filtered) // 批量插入（响应式）
}
</script>- 原理：利用 length = 0 和 push(...) 触发响应式更新；
- 缺点：创建中间数组 + 两次响应式触发，性能开销显著高于前两种；
- 建议：仅在需保留 reactive 且无法改用 ref 的遗留场景下使用。
? 总结与最佳实践
- 永远不要对 reactive([]) 变量直接赋值（如 users = [...]），这会切断响应式连接；
- 优先选择 ref 管理数组状态——它专为“整体替换”设计，语义与行为高度一致；
- 若坚持用 reactive，请始终通过 Vue 支持的原地变异方法（splice、push 等）操作；
- 在模板中使用 v-if="users.length > 0" 是安全的，因为 ref 的 .value 或 reactive 数组的 length 属性均被深度代理。
掌握这三种模式，即可从容应对 Vue 3 中所有数组状态更新需求，兼顾正确性、性能与可维护性。
