Vue3中获取的数据无法在其他方法正常使用的问题求助

安全阿岳

2026-8-8

问题原因

这是异步操作的执行顺序导致的问题：

fetch 是异步请求，调用 this.getData() 后，JavaScript 不会等待请求完成，而是直接执行后续的 this.otherFunction()。
此时 API 请求还未返回数据，dataAll 仍是初始的空数组（Vue3 中响应式数组会被包装成 Proxy 对象），所以控制台输出 Proxy {} - Array(0)。

解决方案

有两种常用的解决方式：

方式一：在请求完成后调用 `otherFunction`

修改 getData 方法，在数据赋值完成后直接触发依赖该数据的方法：

const app = Vue.createApp({
 data() {
  return {
   dataAll : [],
  };
 },

 mounted() {
  this.getData();
 },

 methods: {
  getData() {
   fetch('app/api.php')
   .then((response) => response.json())
    .then((data) => {
      this.dataAll = data;
      this.otherFunction(); // 请求完成后再调用
    });
  },
  otherFunction() {
   console.log(this.dataAll);
  }
});

方式二：使用 `async/await` 让 `mounted` 等待请求完成

将 mounted 改为异步函数，等待 getData 执行完毕后再调用后续方法：

const app = Vue.createApp({
 data() {
  return {
   dataAll : [],
  };
 },

 async mounted() {
  await this.getData(); // 等待请求完成
  this.otherFunction();
 },

 methods: {
  async getData() {
   const response = await fetch('app/api.php');
   const data = await response.json();
   this.dataAll = data;
  },
  otherFunction() {
   console.log(this.dataAll);
  }
});

额外说明

如果需要在多个组件或方法中复用 dataAll，可以考虑：