vue3 - 为什么响应式数据变了，但是视图没有更新呢？

Question

为什么响应式数据变了，但是视图没有更新呢？

问题背景

没有后端，简单模拟了一下后端的数据和操作。

// 服务端数据库中的数据const serverTableData = [  {    id: 1,    name: "peter",    age: "18"  },  {    id: 2,    name: "tom",    age: "17"  }]

最开始的时候，加载服务端数据到本地，并将其转换为一个响应式数据（这样我们就可以操作这个响应式数据来自动更新表格显示了）

// 最开始，加载服务端数据const localTableData = ref(serverTableData);function update() {  // 获取最新数据(模拟)  localTableData.value = serverTableData;  console.log("update", localTableData.value, serverTableData);}

本地编辑修改数据

const editingItem = ref(); // 当前修改的内容，将会作为编辑表单的内容function handleEdit(index, row) {  console.log("edit");  console.log("index: ", index, " row: ", row);  console.log("update editing Item");  // 获取当前编辑行的副本  // 注意点: 在修改的时候，输出表格中的对应条目不能跟着改变  editingItem.value = {...row};  openDrawer();}

模拟将修改内容上传到服务端，服务端修改数据库（先删除原来的，然后添加编辑过后的）和结果提示

async function saveEditedItem(formInstance) {  // 模拟服务端操作  const editIndex =  serverTableData.findIndex(e => e.id === editingItem.value.id);  if(editIndex !== -1) {    serverTableData.splice(editIndex, 1);    serverTableData.push({...toValue(editingItem)});    console.log("after edite item, serverTableData: ", serverTableData);    await simulateOperation();    ElMessage({      message: "修改成功",      type: "success",      duration: 1000    })  }else {    await simulateOperation();    ElMessage({      message: "修改失败",      type: "error",      duration: 1000    })  }  closeDrawer();}async function simulateOperation() {  startLoading();  await sleep(1);  endLoading();}

问题详情

编辑修改之后，点击获取最新数据按钮，表格中的数据并没有发生变化，为什么？

附：
element plus playground

Answer 1

1、saveEditedItem中不应该对serverTableData进行操作，而应该操作localTableData.value，localTableData才是响应式数据，serverTableData不是
2、代码中localTableData的赋值操作都是对serverTableData的直接操作，赋值来赋值去值都一样，没有改变，也就不会更新页面。可以对serverTableData进行结构localTableData.value = [...serverTableData]。真实的数据接口不需要，因为接口返回的都是新的数据