Vue3 はリアクティブを使用して多くの値を定義し、インターフェイスを呼び出すときに指定されたデータのみを転送します
不合格の項目に加えて残りの項目は合格します
例：
const pageData = reactive({
pageNo: 1,
pageSize: 10,
customerId: props.id,
items: []
})
最初の方法:
const dataToSend = {
...pageData } // 复制pageData对象，避免直接修改原对象
delete dataToSend.items // 删除items属性
// 将dataToSend发送到后端
このようにして、pageData オブジェクトの items 属性をフィルターで除外できます。pageData オブジェクトをコピーするには JavaScript... の拡張演算子を使用することに注意してください。そうしないと、 items プロパティを直接削除すると、pageData オブジェクトの元の値に影響を与える可能性があります。
2 番目の方法:
const dataToSend = Object.assign({
}, pageData)
delete dataToSend.items
// 将dataToSend发送到后端
// 请求成功后，将服务器返回的数据合并到pageData对象中的items属性中
pageData.items = res
Object.assign() メソッドを使用すると、pageData オブジェクトのすべてのプロパティを新しいオブジェクトにコピーし、新しいオブジェクトの items プロパティを削除できます。
3 番目の方法:
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