Vue3中ref值访问异常：为何console.log(recipe.value)输出空对象？

这种现象的核心原因是浏览器控制台的惰性求值特性，结合异步请求的执行时机导致的：

• 直接打印ref对象时，控制台存储的是这个对象的引用。当你在控制台展开这个ref对象时，异步GET请求已经完成，recipe.value已经被赋值，所以能看到有数据的状态。但这并不是你执行console.log(recipe)那一刻的真实状态。
• 而打印recipe.value时，你获取的是执行打印瞬间的值快照。此时异步请求还未返回，value还保持初始的空对象状态，所以打印结果为空。

验证方式 #

可以通过以下方式确认打印瞬间的真实值：

// 打印快照的字符串形式，能看到真实的即时状态
console.log(JSON.stringify(recipe.value))

// 或者在请求完成的回调里打印
// 假设你的composable逻辑类似
const fetchRecipe = async () => {
  const data = await api.get('/recipe')
  recipe.value = data
  console.log(recipe.value) // 此时能看到正确数据
}

解决办法 #

如果需要在数据加载完成后执行操作或打印，可以：

• 使用Vue的watch监听recipe的变化：

watch(recipe, (newVal) => {
  console.log(newVal) // 数据更新时触发
}, { immediate: false })

• 确保在异步请求完成后再访问recipe.value，比如在composable中返回Promise，在onMounted里await：

// 假设你的composable结构如下
export const useRecipe = () => {
  const recipe = ref({})
  const fetchData = async () => {
    recipe.value = await fetch('/api/recipe').then(res => res.json())
  }
  return { recipe, fetchData }
}

// 在组件中
onMounted(async () => {
  await fetchData()
  console.log(recipe.value) // 此时数据已加载完成
})

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