vue3数据处理问题 定义数据问题

Question

vue3数据处理问题

功能需求：根据上面所选条件，向table中添加数据，向table内添加一条之后并输入出库数量，再次添加一条数据，table中原有的数据不能改变。
思路：创建处理函数disposeOutgoingData，每次添加或者删除table中的数据都会都会改变disposeOutgoingData的参数e（e是一个数组，存储选中数据的id）通过id和arrData数据进行对比，将数据保存到GoodsClaimed中，

问题：当我将arrData放在函数内去查找数据并保存到GoodsClaimed中的时候能实现功能需求，但是当我将arrData放到全局的时候会出现这个问题：我先在table中加入一条数据并输入出库数量后，再次向table中添加数据，第一条的出库量会消失不见。

解决方法：定义一个深拷贝方法，将全局的arrData拷贝之后再操作。

疑惑：为什么放在全局会出现这种情况
猜测：可能和vue3响应式有关系

// 在全局定义
const arrData = ref([
    { id: 101, kind: '1', name: '101', spec: '个', num: 10 },
    { id: 102, kind: '1', name: '102', spec: '个', num: 10 },
    { id: 201, kind: '2', name: '201', spec: '个', num: 10 },
    { id: 202, kind: '2', name: '202', spec: '个', num: 10 },
    { id: 203, kind: '2', name: '203', spec: '个', num: 10 }
  ])

const disposeOutgoingData = (e) => {
  // 在函数中定义
  /* const arrData = [
    { id: 101, kind: '1', name: '101', spec: '个', num: 10 },
    { id: 102, kind: '1', name: '102', spec: '个', num: 10 },
    { id: 201, kind: '2', name: '201', spec: '个', num: 10 },
    { id: 202, kind: '2', name: '202', spec: '个', num: 10 },
    { id: 203, kind: '2', name: '203', spec: '个', num: 10 }
  ] */
  // 数据深拷贝后再操作 
  const arr = deepCopy(arrData.value)
  let procedural = e.map((item) => {
    let obj = arr.find((ent) => {
      return item == ent.name
    })
    obj.quantityClaimed = ''
    return obj
  })
  console.log(procedural, '')
  if (GoodsClaimed.value.length == 0) {
    procedural.filter((item) => {
      GoodsClaimed.value.push(item)
    })
  } else if (procedural.length > GoodsClaimed.value.length) {
    let existingIds = {}
    for (let item of GoodsClaimed.value) {
      existingIds[item.id] = true
    }
    for (let item of procedural) {
      if (!existingIds[item.id]) {
        GoodsClaimed.value.push(item)
      }
    }
  } else if (procedural.length < GoodsClaimed.value.length) {
    let matchingItems = []
    for (let item of GoodsClaimed.value) {
      if (procedural.some((i) => i.id === item.id)) {
        matchingItems.push(item)
      }
    }
    GoodsClaimed.value = matchingItems
  }
}
// 深拷贝代码
const deepCopy = (data) => {
  let datas = Array.isArray(data) ? [] : {}
  if (Array.isArray(data)) {
    data.forEach((v) => {
      datas.push(deepCopy(v))
    })
  } else if (typeof data === 'object') {
    for (const key in data) {
      datas[key] = deepCopy(data[key])
    }
    // eslint-disable-next-line no-constant-condition
  } else if (typeof data === 'string' || 'number' || 'boolean') return data
  return datas
}

Answer 1

参考通义千问和郭老师的小迷弟雅思莫了-编写提供，您可以参考如下，如果回答的不正确，及时评论区回复我，我会根据你错误描述追加回复。如果解决了您的问题，麻烦帮我点击个采纳！谢谢您的肯定！

在Vue3中，数据是响应式的。当你在全局定义arrData并且直接修改它时，任何绑定到arrData的数据也会被实时更新，这包括你在表格中显示的数据。当你第二次调用disposeOutgoingData函数时，由于你是在原对象上直接操作，之前在table中输入的出库数量会被覆盖。

当你将arrData放在函数内部作为局部变量时，你实际上创建了一个原始数据的新副本，因此对这个副本的操作不会影响全局的arrData及其绑定的视图。

解决方法就是使用深拷贝（如你的deepCopy函数），这样可以确保在不改变原始数据的情况下进行操作，从而满足功能需求。

简而言之，在全局使用ref或reactive创建的对象都是响应式的，当你直接操作它们时会影响到视图。而深拷贝能够创建一个新的非响应式的对象副本，这样在函数内部操作这个副本就不会影响到全局状态。