Vue3中如何正确从ref对象中获取其包裹的属性值

问题原因 #

1. ref对象在JS逻辑中访问值需要加.value，你直接打印teamData.title属于语法错误，必然返回undefined。
2. 数据请求是异步行为：你在setup阶段同步打印时，fetchTeamGoal接口还未返回结果，teamData此时还是初始值{}，所以teamData.value.title也会返回undefined。你在控制台看到整个teamData对象有值，是因为浏览器控制台打印引用类型时是懒加载的，你点开查看时接口已经返回完成，看到的是最新的引用值，并非打印当时的快照。

解决方法 #

场景1：模板中使用

直接写{{ teamData.title }}即可，Vue模板会自动解包ref，无需加.value，接口返回后视图会自动更新，建议加可选链兜底避免渲染报错：

<span>{{ teamData?.title }}</span>

场景2：JS逻辑中需要拿到数据后做后续处理

用watch监听teamData的变化，拿到返回值后再执行对应逻辑：

// test.vue的setup中添加
import { watch } from 'vue'

watch(teamData, (newVal) => {
  if (newVal?.title) {
    console.log('title值：', newVal.title)
    // 此处写拿到title后的业务逻辑
  }
}, { deep: true })

额外优化建议 #

你异步函数的写法冗余，await和.then不需要同时使用，可以调整为更简洁的写法：

// useTeamData.js中的getTeamGoals调整
const getTeamGoals = async () => {
  const res = await fetchTeamGoal(date.value + '-01')
  teamData.value = res.data
}

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