从可组合项访问引用值

这是我的 Vue3 应用程序代码：

<template>
  {{ names_data }}
</template>

<script>
import getData from "./composables/getData"

export default {
  name: "App",
  setup() {
    var filenames = ["test1.json", "test2.json"];
    const { names_data, error, load_data } = getData(
      filenames
    );
    load_data();
    console.log("names", names_data)

    console.log("error", error)

    return { names_data };
  },
};
</script>

导入的可组合函数如下：

import { ref } from "@vue/runtime-core";

const getData = (filenames) => {
  const names_data = ref([])
  const error = ref(null)

  const load_data = async () => {
    try {
      var promises = [];
      for (let i = 0; i < filenames.length; i++) {
        var filename = filenames[i]
        promises.push(
          fetch(`data/${filename}`).then(
            (res) => (res.ok && res.json()) || Promise.reject(res)
          )
        );
      }
      const data = await Promise.all(promises);
      names_data.value = data
    } catch (err) {
      error.value = err.message;
      console.log(error.value);
    }
  };
  return { names_data, error, load_data }
};

export default getData

数据文件包含以下内容：

测试1.json

{
  "members": {
    "0": "Alice",
    "1": "Bob",
    "2": "Charlie"
  }
}

测试2.json

{
  "members": {
    "0": "David",
    "1": "Elizabeth",
    "2": "Fred"
  }
}

这一切都有效：我可以看到names_data从屏幕上显示的模板。然而在控制台中names_data显示如下：

RefImpl {_shallow: false, dep: 未定义, __v_isRef: true, _rawValue: Array(0), _value: Proxy} dep: 设置(1) {ReactiveEffect} __v_isRef：正确 _rawValue: (2) [{…}, {…}] _浅：假 _value：代理 {0：{…}，1：{…}} 价值： （...） [[原型]]：对象

我希望能够访问其中的值names_data进行进一步处理，例如将它们放入表格中，但是当我这样做时console.log(names_data.value)在应用程序中，我得到一个空数组的代理对象。 我觉得names_data对象以某种方式失去反应性，因为它在以下情况下不会更新load_data()叫做。但它显然在模板中是反应性的。所以我对这里发生的事情感到困惑。

如何访问 ref 的值以进一步处理它？

它按预期工作。如果不使用反应性，这将导致this https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call流行的比赛条件。使用反应性的要点是值是反应性的，并且可以通过组合 API 在其他地方组合。

在这种情况下，无需等待load_data完成于setup身体。它应该在值可用时被访问：

const { names_data, error, load_data } = getData(...);
load_data();
watch(names_data, data => {
    console.log(data);
});