Vue3 Composable中Ref值访问问题（续）：如何获取watchEffect内的处理结果

问题核心原因 #

你在watchEffect内部使用const reversed_names重新声明了局部变量，这个变量和你在外部提前定义、最终要返回的reversed_names ref是两个完全独立的变量，内部的赋值操作自然不会同步到外部要返回的ref上。

另外你在setup同步阶段打印外部reversed_names时，异步的文件加载还未完成，names_data还没更新触发watchEffect的重计算，此时输出空值属于正常现象，只要ref被正确赋值，后续数据更新后模板会自动响应式渲染最新值。

解决方法 #

修改watchEffect内部的逻辑，直接给外层的reversed_names ref赋值即可：

调整后的App组件setup代码 #

setup() {
  var filenames = ["test1.json", "test2.json"];
  const { names_data, error, load_data } = getData(filenames);
  load_data();

  const reversed_names = ref({});

  watchEffect(() => {
    // 去掉内部的const声明，直接给外层ref的value赋值
    // reverseNames返回的是ref对象，所以需要取.value拿到实际的计算结果
    reversed_names.value = reverseNames(names_data.value).value;
    console.log("revnames inside watchEffect", reversed_names.value);
  });
  console.log("revnames outside watchEffect", reversed_names);

  return { names_data, reversed_names };
}

可选优化 #

因为你是在names_data加载完成后才执行reverseNames计算，不需要reverseNames返回响应式对象，可以简化reverseNames函数，直接返回普通对象减少不必要的ref开销：

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

const reverseNames = (names_data) => {
  // 去掉ref包装，直接声明普通对象
  const reverse_names = {}
  var filenames = Object.keys(names_data)
  for (let f in filenames) {
    var filename = filenames[f]
    reverse_names[filename] = {}
    var members = names_data[filename]["members"]
    for (let n in members) {
      let name = members[n];
      var reverseName = name.split("").reverse().join("");
      reverse_names[filename][name] = reverseName
    }
  }
  return reverse_names
};

export default reverseNames

对应修改watchEffect里的赋值逻辑，不需要再取.value：

reversed_names.value = reverseNames(names_data.value);

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