Vue3中如何在一个计算属性里访问另一个计算属性的对象属性

问题核心在于：Vue的computed返回的是响应式Ref对象，而非直接的原始值。你直接写message.body时，是在访问Ref容器本身的body属性（这个属性根本不存在），而非它内部包裹的对象的body属性，所以会得到undefined。

修正方法很直接：在msg的计算属性里，先通过.value拿到message返回的对象，再访问其body属性：

<script setup>
import { computed } from 'vue'

const message = computed(() => {
  return {
    body: 'howdy'
  }
})

// 修正：先取message.value拿到目标对象，再访问body属性
const msg = computed(() => {
  return message.value.body
})
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

额外说明： #

• 计算属性返回的Ref对象在<template>中会被Vue自动解包，所以模板里直接写{{ msg }}即可，不需要加.value
• 只有在<script setup>的逻辑代码里，才需要手动用.value访问Ref对象的内部值

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