Vue中ref存储数组却变为Proxy对象的问题求助

你遇到的Proxy不是bug，是Vue 3响应式系统的正常行为——当你用ref存对象或数组这类引用类型数据时，Vue会自动把它们包装成Proxy，以此实现数据变化时的视图自动更新。

为什么其他ref（比如loading）没出现Proxy？ #

因为loading存的是布尔值这种基础类型，Vue会直接存储值，不会包装成Proxy；而数组是引用类型，才会触发Proxy包装。

怎么正常使用Proxy包装后的数组？ #

其实这个Proxy数组和普通数组用法完全一样：

• 遍历：myTasks.value.forEach(task => console.log(task.name))
• 模板里渲染：<div v-for="task in myTasks" :key="task.id">{{ task.name }}</div>
• 访问元素：myTasks.value[0].name

控制台显示Proxy只是Vue的调试友好展示，实际操作和普通数组没有区别，不用特意“去掉”它——毕竟你需要的就是响应式，而Proxy正是实现响应式的关键。

如果确实需要获取原始数组（不推荐，会丢失响应式） #

要是你有特殊场景必须拿到未包装的普通数组，可以用Vue提供的toRaw方法：

<script setup>
import { ref, toRaw } from 'vue'
import { pb } from '../usePb'

const loading = ref(false)
const error = ref(null)
const myTasks = ref(null)

const fetchData = async () => {
  loading.value = true
  try {
    const rawTasks = await pb.collection('tasks').getFullList()
    myTasks.value = rawTasks // 保持响应式，仍会被包装成Proxy
    // 临时获取未包装的原始数组
    const originalArray = toRaw(myTasks.value)
    console.log(originalArray)
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}

fetchData()
</script>

总结 #

不用纠结控制台的Proxy显示，直接按普通数组的方式使用myTasks.value即可，它完全能正常工作，同时还能保持响应式——这正是你用ref存储数据的初衷。

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