Vue3 数据通过赋值恢复初始值不生效问题

需求：

表格搜索之后，tabs的数据根据搜索结果进行修改，切换tab时，tabs恢复初始值

解决：

对初始值进行存储，切换tab时将存储的值赋值给tabs

问题：

第一次切换tab时，tabs恢复了，后续切换就不会恢复初始值了

原因：

// 切换tab时的方法
const changeTab = (item: any) => {
    ...
    tabs.value = oldTabs;  // 此处对tabs.value进行赋值，相当于tabs.value等同于oldTabs
    //所以此时的oldTabs也是被修改了的，所以此处赋值也需要tabs.value = JSON.parse(JSON.stringify(oldTabs))
    getTableData();
  };
  
// 获取初始tabs的方法
 const getTabs = async () => {
    const { data, code } = await getXXX();
    if (+code === 0) {
      const tabsArr = data.map((item: any) => {
        return {
          title: `${item.name}(${item.value})`,
          key: item.code,
        };
      });
      oldTabs = JSON.parse(JSON.stringify(tabsArr));
      tabs.value = tabsArr; // 此处对tabs进行复制，相当于tabs.value的地址等同于tabsArr
      ...
    }
  };
  
  // 此处修改过tabs
  const getTableData = async () => {
    ...
    if (+code === 0) {
     ...
      // 搜索之后tab数字也跟着修改
      tabs.value.forEach((item: any) => {
        if (item.key === currentTab.value) {
          const str = item.title.split('(')[0];
          item.title = `${str}(${data.total})`;
        }
      });
    }
  };