Vue 3 Composition API：如何通过代码访问响应式数组的真实值？

问题描述 #

在组件中定义了如下响应式对象：

const form = reactive({
    name: null,
    fruits: new Array(),
})

其中name的值通过文本输入框设置，fruits的值通过一组复选框设置。调用以下函数时：

const makeObj = () => {
    console.log("form.name", form.name)
    console.log("form.fruits", form.fruits)
}

form.name能正常输出对应值，但form.fruits返回的是Proxy对象，不过可以直接通过form.fruits[0]访问数组元素（比如得到Banana）。需要解决的问题是：如何获取form.fruits的普通数组值？是否需要进行转换？

解决方法 #

这是Vue 3响应式系统的正常表现——reactive包裹的对象（包括数组）都会被转换为Proxy实例，以此实现响应式追踪。如果需要获取普通数组，有几种简单方式：

• 使用Array.from()转换
  直接将Proxy数组转为普通数组：

  const normalFruits = Array.from(form.fruits)
  console.log(normalFruits) // 输出普通数组
  

• 使用展开运算符...解构
  通过展开运算符快速得到普通数组：

  const normalFruits = [...form.fruits]
  console.log(normalFruits) // 输出普通数组
  

• 使用Vue提供的toRaw()方法
  toRaw()可以直接获取响应式对象的原始值，适合需要保留原数组引用的场景：

  import { toRaw } from 'vue'
  
  const normalFruits = toRaw(form.fruits)
  console.log(normalFruits) // 输出原始数组
  

补充说明 #

• 如果只是需要遍历数组或访问单个元素，其实不需要转换，直接使用form.fruits即可（比如form.fruits.forEach(item => {})或form.fruits[index]），Vue会自动处理Proxy的取值逻辑。
• 关于“响应式常量”的疑问：const限制的是变量form本身不能被重新赋值，但它指向的响应式对象内部的属性是可以修改的，这并不矛盾——const约束的是变量的引用关系，而非对象内部的可变性。

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