Vue3组合式API外置computed返回ComputedRefImpl对象问题

你遇到的异常是因为外置的useComputedValue组合式函数返回的是包裹了computedRef的对象，而非直接返回computedRef实例本身：

• 你在useComputed.js里的返回值是{computedValue: 计算属性ref}，所以.vue文件中接收的computedCount本质是一个普通JS对象，模板直接渲染时会把整个对象序列化为JSON字符串输出，控制台打印也会显示对象结构
• 你在.vue文件内直接写computed时是直接将ref赋值给变量，没有额外包裹对象，所以可以正常读取值

方法1：修改组合式函数直接返回计算属性 #

调整useComputed.js的返回逻辑，不包裹对象直接返回computed实例：

import { computed } from 'vue'

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

此时.vue文件内的原有调用逻辑不需要修改，模板{{ computedCount }}即可正常输出计算结果。

方法2：保留返回对象结构，调用时正确取值 #

如果你的组合式函数后续需要返回多个值，需要保留对象结构的话，在.vue文件接收时正确解构或者访问属性即可：

// 方式A：解构赋值重命名
const { computedValue: computedCount } = useComputedValue(count)

// 方式B：访问对象属性，模板渲染时写{{ computedCount.computedValue }}
const computedCount = useComputedValue(count)

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