无法重置值为数组的Reactive对象？求解决方案及原理说明

解决方案 #

方法1：直接替换数组引用 #

reactive包装的数组是响应式对象，直接替换整个引用能触发Vue的响应式更新：

import { reactive, watch } from 'vue'

const state = reactive({
  type: 'A',
  list: [1, 2, 3]
})

watch(() => state.type, (newType) => {
  // 根据新type赋值全新数组
  state.list = newType === 'B' ? [4, 5, 6] : [1, 2, 3]
})

方法2：清空原数组后填充新数据 #

如果不想改变数组引用，可先清空再用变更方法填充：

watch(() => state.type, (newType) => {
  // 清空原数组（直接修改length会触发响应式）
  state.list.length = 0
  // 用push批量添加新元素，确保响应式更新
  const newData = newType === 'B' ? [4, 5, 6] : [1, 2, 3]
  state.list.push(...newData)
})

为什么Object.assign无法作用于Reactive数组 #

• Object.assign的核心逻辑是把源对象的可枚举属性复制到目标对象，但数组的元素是通过索引（比如0、1）作为属性存储的，而length属性是特殊的内置属性。
• 当你尝试用Object.assign(state.list, newArr)时：
  1. 新数组的索引属性会被复制到原数组，但如果原数组长度比新数组长，多余的旧索引属性（比如原数组有3个元素，新数组只有2个，索引2的旧值不会被删除），导致数组残留旧数据。
  2. Vue的reactive对数组的响应式追踪依赖数组变更方法（push、splice等）或引用替换，Object.assign修改索引属性的操作无法被响应式系统正确捕获，所以界面不会刷新。
  3. 另外，Object.assign不会主动同步数组的length属性，除非源对象显式传入length，这会导致原数组长度和实际元素数量不匹配。

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