Vuesjs 3组合中的计算函数返回refImpl

Question

我正在尝试使用 Vuejs 3 中的计算函数，该函数通过组合在 .js 文件中外部化。

\n

这是我的 .vue 文件，它非常简单：一个递增以触发计算函数的计数变量。

\n

<template>\n  <div>\n    {{ computedCount }}\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \'vue\'\nimport useComputedValue from \'./js/useComputed\' // Import computed function\n\nconst count = ref(0) // Instanciate the count variable\ncount.value += 1 // Trigger the compute\nconst computedCount = useComputedValue(count)\nconsole.debug(computedCount)\n</script>\n\n

\n

这是我的 useCompulated.js 文件：

\n

import { computed } from \'vue\'\n\nexport default function useComputedValue(count) {\n  const computedValue = computed(() => count.value * 5)\n  return {\n    computedValue,\n  }\n}\n\n

\n

该函数只是将参数中给出的值乘以 5。\n问题是 console.log(compulatedCount) 给出了

\n

{computedValue: ComputedRefImpl}\ncomputedValue: ComputedRefImpl {dep: Set(1), _dirty: false, __v_isRef: true, effect: ReactiveEffect, _setter: \xc6\x92, \xe2\x80\xa6}\n[[Prototype]]: Object\n\n

\n

并且在模板中显示 { "compulatedValue": 5 }\n因此，该函数返回的不是参数乘以 5 的值，而是一个包装对象 refImpl。

\n

该示例改编自文档： Composition doc

\n

如果我直接在 .vue 文件中的标记中声明计算函数，而不从另一个文件导入它，它会按预期工作：该函数返回计数值乘以 5。

\n

显然，这是我不太明白的事情......但是什么？

\n

我正在使用 3.2 和标签，因此不再需要脚本标签中 setup() 的返回：3.2

\n

提前谢谢您。

\n

Answer 1

您正在返回函数本身。如果在模板之外，则需要返回computedCount.value