为什么我们需要在模板内使用 `.value` 作为返回计算引用的函数

Question

我有一个返回

ComputedRef

的函数，如下所示

// a computed ref function
const publishedBooksMessage = () => computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

要访问模板内该函数返回的值，我必须访问该函数返回的

value

属性，如下所示。 工作小提琴

<span>{{ publishedBooksMessage().value === 'Yes' ? 'YES' : 'No' }}</span>

但是，如果这是一个如下所示的计算属性

// a computed ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

我可以简单地使用属性变量本身来访问它，而无需访问该变量的

value

属性，如下所示。 工作小提琴

<span>{{ publishedBooksMessage === 'Yes' ? 'YES' : 'No' }}</span>

第一个和第二个实现的返回类型是

ComputedRef

。那么为什么第一个实现需要检查返回值的 value 属性，而第二个实现只需检查变量名称本身就足够了？

Answer 1

在模板中删除 .value 的原则称为

unwrapping

，根据官方文档中的 在模板中展开时的注意事项，他们说：

仅当 ref 是模板渲染上下文中的顶级属性时，模板中的引用展开才适用。

由于这适用于嵌套引用属性，因此也适用于返回引用的函数。