Vue 3 扁平化嵌套对象响应式数组时如何保留响应性避免崩溃

最优方案：全量替换法（无响应性丢失风险） #

直接生成新数组赋值给响应式变量，Vue 3 可以完整追踪到整个数组的变更，不会出现响应性丢失问题：

// 提取索引为2的嵌套子数组，将内部每个元素包裹为独立单元素数组
const flattenItems = this.grouped[2].map(token => [token])
// 拼接生成全新的数组后直接赋值
this.grouped = [
  ...this.grouped.slice(0, 2), // 保留索引2之前的元素
  ...flattenItems, // 插入展开后的元素
  ...this.grouped.slice(3) // 保留索引2之后的元素
]

可选方案：splice原地修改法 #

如果需要原地修改数组，使用一次splice完成删除+插入操作，避免多次操作引发的更新异常：

// 先获取需要展开的嵌套子数组
const targetNestedArr = this.grouped[2]
// 从索引2位置删除1个原嵌套数组，同时插入展开后的多个单元素数组
this.grouped.splice(2, 1, ...targetNestedArr.map(item => [item]))

异常问题排查 #

你遇到的响应性丢失、浏览器卡死通常是以下原因导致：

• 数组修改逻辑写在了watch、计算属性、模板渲染函数等副作用执行逻辑中，修改数组触发重新执行副作用，形成无限循环导致浏览器卡死
• 使用组合式API时，grouped未通过ref/reactive声明为响应式变量，或者修改时忘记操作ref的.value属性

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