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

Question

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

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

<template>
  <div>
    {{ computedCount }}
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useComputedValue from './js/useComputed' // Import computed function

const count = ref(0) // Instanciate the count variable
count.value += 1 // Trigger the compute
const computedCount = useComputedValue(count)
console.debug(computedCount)
</script>

这是我的 useComputed.js 文件：

import { computed } from 'vue'

export default function useComputedValue(count) {
  const computedValue = computed(() => count.value * 5)
  return {
    computedValue,
  }
}

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

{computedValue: ComputedRefImpl}
computedValue: ComputedRefImpl {dep: Set(1), _dirty: false, __v_isRef: true, effect: ReactiveEffect, _setter: ƒ, …}
[[Prototype]]: Object

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

该示例改编自文档：Composition doc

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

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

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

提前谢谢你。

标签： javascriptvuejs3vue-composition-apicomputed-properties