背景

今天在项目中需要做一个表格，用的vue+ant-design-vue,把表格的data配置单独放在一个config里面，然后通过import引入到vue文件中，再把配置分配给vue文件中的一个变量，如下图所示

配置文件中

import { reactive } from "vue";
export const data = reactive([
  {
    key: "1",
  },
]);

vue文件

<template>
  <div></div>
</template>
<script setup>

import { data } from "./config";
import { ref, watch } from "vue";

const tableData = ref(data);       把data给到tableData

watch(
  () => tableData.value,
  () => {
    tableData.value.push({
      key: "4",
    });
  },
  { immediate: true }
);
</script>

<style></style>

BUG

watch当数据变化去更新tableData

问题出现了，此时更改的是tableData的值，但是当我打印data的时候，却发现data也被更改了，直接懵逼了，根本想不明白，还以为哪里错了，先看一下打印

100%不对，从上午，一直到下午一直在反复查这个问题，然后再config文件夹也尝试打印一下，直接震惊我

刚定义，立马就变了，10个脑袋也想不明白，现在也不明白，难道这个是异步执行的？？

这个应该是一个拷贝问题，两个对象指向一个地址，更改一个，另一个就变了，后面我才明白过来，只要把data解构就行了，记录一次心酸的找bug，难受的一笔

解决方法

最后的解决方法

拷贝引起的bug

背景

BUG

解决方法