Vue3使用reactive定义很多值，调接口时只传指定的数据

Vue3使用reactive定义很多值，调接口时只传指定的数据

除了items 不传其余的都传

示例：

const pageData = reactive({
    
    
  pageNo: 1,
  pageSize: 10,
  customerId: props.id,
  items: []
})

第一种方式：

const dataToSend = {
    
     ...pageData } // 复制pageData对象，避免直接修改原对象
delete dataToSend.items // 删除items属性
// 将dataToSend发送到后端

这样就能把 pageData 对象中的 items 属性过滤掉了。注意要使用 JavaScript 的扩展运算符 … 将 pageData 对象进行复制，否则直接删除 items 属性可能会影响到 pageData 对象的原始值。

第二种方式：

const dataToSend = Object.assign({
    
    }, pageData)
delete dataToSend.items
// 将dataToSend发送到后端

// 请求成功后，将服务器返回的数据合并到pageData对象中的items属性中
pageData.items = res

可以使用 Object.assign() 方法将 pageData 对象的所有属性复制到一个新对象中，并在新对象中删除 items 属性

第三种方式：

const dataToSend = Object.fromEntries(Object.entries(pageData).filter(([key]) => key !== 'items'))
// 将dataToSend发送到后端

// 请求成功后，将服务器返回的数据合并到pageData对象中的items属性中
pageData.items = res

如果你不想直接修改原对象或创建新对象，你可以使用 JavaScript 中的 Object.fromEntries() 和 Object.entries() 方法来过滤掉 items 属性。具体方法是先将 pageData 对象转换成一个二元数组，再使用 filter() 方法过滤掉 items 属性，最后再将过滤后的二元数组转换回对象。

第四种方式

如果你想要一个性能高的写法，可以使用 JSON.stringify() 和 JSON.parse() 方法来深度克隆对象，同时在克隆时过滤掉 items 属性。这种方法的好处是避免了手动创建新对象或使用额外的方法进行过滤，同时也避免了使用浅拷贝可能带来的问题。

// 克隆pageData对象并过滤掉items属性
const dataToSend = JSON.parse(JSON.stringify({
    
     ...pageData, items: undefined }))

// 将dataToSend发送到后端

// 请求成功后，将服务器返回的数据合并到pageData对象中的items属性中
pageData.items = res