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

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

问题背景

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

// 服务端数据库中的数据
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