Vue中ref变量函数内外输出不一致，无法获取赋值后的值求助

核心问题 #

你遇到的问题源于两个关键错误：

1. 错误覆盖Ref对象：用ref()创建的响应式变量，必须通过.value属性修改内部值。你在函数里直接给namesList重新赋值（namesList = data.value.map(...)），这会把原本的Ref对象替换成普通数组，但外部引用的还是最初的Ref对象，自然拿不到新值。
2. 异步时序问题：GetFormData是异步操作，如果外部在请求未完成时就打印namesList，此时异步逻辑还没执行，拿到的肯定是初始的空数组Ref。

修复代码 #

修改后的代码如下：

let namesList = ref([]);

const GetFormData = (payload) => {
  return new Promise((resolve, reject) => {
    api
      .get("api.php", { params: { search: payload } })
      .then((response) => {
        data.value = response.data;

        // 不要直接赋值namesList，而是修改它的value属性
        namesList.value = data.value.map(function (list) {
          return list["first_name"];
        });
        console.log(namesList.value); // 这里打印更新后的数组
        resolve(namesList.value); // 将结果resolve出去，方便外部处理
      })
      .catch((error) => {
        reject(error);
      });
  });
};

正确访问方式 #

要在外部获取更新后的namesList，必须确保异步操作完成：

// 方式1：在async函数中使用await
async function fetchData() {
  await GetFormData("你的搜索参数");
  console.log(namesList.value); // 此处能拿到最新值
}

// 方式2：用then链式调用
GetFormData("你的搜索参数").then(() => {
  console.log(namesList.value);
});

内容的提问来源于stack exchange，提问作者Michael Angelo Corral