四种方法把 Proxy 对象代理数组处理成普通数组
现象:数组出现代理包数据代理不能正常数据处理及使用需要处理成普通数组
一、使用 JSON.parse(JSON.stringify())
深度拷贝
const getList = async (params) => {// 将 Proxy 数组转换为普通数组const normalSelectedOptions = JSON.parse(JSON.stringify(selectedOptions.value));console.log('普通数组:', normalSelectedOptions);
}
二、使用 Vue 3 的 toRaw()
方法
import { toRaw } from 'vue';const getList = async (params) => {// 使用 toRaw 获取原始数组const rawSelectedOptions = toRaw(selectedOptions.value);console.log('原始数组:', rawSelectedOptions);
}
三、使用展开运算符进行浅拷贝
const getList = async (params) => {// 使用展开运算符创建新数组const normalArray = [...selectedOptions.value];console.log('普通数组:', normalArray);
}
四、使用 Array.from()
const getList = async (params) => {// 使用 Array.from 创建新数组const normalArray = Array.from(selectedOptions.value);console.log('普通数组:', normalArray);
}