Nuxt 3中useFetch返回Proxy对象，如何获取普通数组/对象？

为什么会出现 Proxy 对象？ #

Nuxt 3 的 useFetch 会自动把响应数据包装成 Vue 3 的响应式 Proxy 对象，目的是让数据能在模板或组件逻辑中自动响应变化，这和 Nuxt 2 里 Axios 直接返回普通对象/数组的行为不同。

正确处理方式 #

你不需要反复调用 toRaw，以下几种方式可以高效处理：

1. 非响应式场景：用 transform 钩子转换数据 #

如果不需要数据保持响应式，或者想直接拿到普通对象/数组，可以在 useFetch 里通过 transform 钩子做深拷贝转换：

const { data: myData } = await useFetch("/api/items", {
  query: { location: destination.value, radius: searchRadius.value },
  // 用 JSON 序列化反序列化实现深拷贝
  transform: (res) => JSON.parse(JSON.stringify(res))
})

也可以用更现代的 structuredClone：

transform: (res) => structuredClone(res)

2. 响应式场景：直接使用无需手动转换 #

如果是在模板里渲染数据，Vue 会自动解包 Proxy，直接写 {{ myData }} 就能正常显示数组/对象内容。

在 <script setup> 的响应式逻辑（比如计算属性、watch）里，也能直接访问 myData.value 的属性，Vue 会自动处理解包：

const filteredItems = computed(() => {
  return myData.value?.filter(item => item.price < 100)
})

3. 一次性获取普通数据 #

如果确实需要拿到完全普通的数组/对象，调用一次 toRaw 后做深拷贝即可：

const rawItems = structuredClone(toRaw(myData.value))
// 此时 rawItems 是彻底的普通数组，不会再是 Proxy

为什么 [...toRaw(myData.value)] 还是 Proxy？ #

toRaw(myData.value) 返回的数组本身是普通数组，但数组里的每一项元素可能还是响应式 Proxy。扩展运算符只是浅拷贝数组，内部元素依然是 Proxy，所以需要深拷贝才能彻底转为普通值。

内容的提问来源于stack exchange，提问作者Family