Vue.js中如何获取数组而非Proxy对象？新手技术求助

问题原因 #

你遇到的是异步请求时序问题：retrieveCompanies里的接口请求是异步操作，mounted钩子执行时请求还未完成，此时this.companies还是初始的空响应式数组——Vue3用Proxy包装响应式数据是正常表现，并非数组真的为空，只是请求还没返回数据。

解决方案 #

1. 在请求完成后直接赋值rows #

把赋值rows的逻辑放在接口请求的回调里，确保数据返回后再执行：

// 定义retrieveCompanies方法（假设用axios请求）
async retrieveCompanies() {
  const response = await axios.get('/your-api-url');
  // 先把接口数据赋值给companies
  this.companies = response.data;
  // 立即将companies的内容赋值给rows（用展开运算符创建副本，避免响应式关联）
  this.rows = [...this.companies];
}

2. 在mounted中等待请求完成后处理 #

如果需要在mounted钩子中触发请求并后续操作，用await等待请求完成：

async mounted() {
  // 等待retrieveCompanies执行完毕
  await this.retrieveCompanies();
  // 此时companies已有数据，可正常赋值rows
  this.rows = [...this.companies];
  // 调试时想看真实数组内容，可转成普通对象
  console.log(JSON.parse(JSON.stringify(this.companies)));
}

3. 基于rows实现过滤逻辑 #

后续可以直接对rows做过滤操作，比如根据id或name筛选：

// 示例：根据名称模糊过滤
filterByName(keyword) {
  // 从原始companies数组中筛选，保证每次过滤都是基于全量数据
  this.rows = this.companies.filter(item => item.name.includes(keyword));
}

关于Proxy的说明 #

Vue3用Proxy实现响应式，所以打印this.companies会显示Proxy包装的对象，这是正常的。你可以直接访问数组的属性（比如this.companies[0].id），如果调试时想看到真实的数组内容，用JSON.parse(JSON.stringify(this.companies))即可转换为普通数组。

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