Vue3中使用Object.assign()的问题

在练习Vue3项目对于一个响应式列表数据在增删的时候重新查询数据时使用Object.assign(data,newData)更新数据到这还一切正常,但在删除数据后调用这个方法时页面却一直没变化.

原代码
const data= async () => {
  let result = await listService()
  // 重新赋值
  Object.assign(oldData, result.data)
}

因为增删改最后都是调用的这个方法,还以为是删除的方法写错了,找了好久最后将问题定位在了Object.assign()这个方法.

通过console.log()打印前后数据发现,result.data数据是最新,但返回的结果还是没变.

在查询了Object.assign()方法后确定该方法为浅拷贝,这就是增改没问题,删除出现问题的原因.

最后解决方法是先把原数据置空,在赋值就行了.

const data= async () => {
  // 重置列表
  oldData.length = 0
  let result = await listService()
  // 重新赋值
  Object.assign(oldData, result.data)
}