当我在引用对象上使用 .value 时，Vuejs Composition API 值消失

Question

我的代码如下

<template>
{{posts}}
</template>

<script>
import { computed, ref } from 'vue';
import getPosts from '../composables/getPosts.js'
import {useRoute} from 'vue-router'

export default {
  setup() {
    const route = useRoute();
    const { posts, error, load } = getPosts();
    load();
    const usedTag = route.params.tag 
    console.log(posts)
    console.log(posts.value)

    return { posts, error }

  }
}
</script>

<style>

</style>

但是，如图所示。当我在我的帖子引用对象上使用 .value 时，我的整个值都消失了（如在控制台中所见，初始 console.log 确实表明我的 _value 中有一个数组。我可以知道发生了什么吗？谢谢你太厉害了！

Answer 1

这是特定于 ref 的性质，因为它本质上包含对可能随时间变化的值的引用。这正是这里发生的事情，ref 值在 getPosts 成功时被异步更改。

价值并没有消失；在调用 console.log 时它不存在。这特定于控制台的工作方式，它保留对输出对象的引用并可以在更改时更新其在控制台中的外观。

此控制台功能可用于以后随时观察对象的变化。它也可能被滥用；控制台应该作为最后的手段用于实时调试，因为它不能反映事物的实际状态。放置断点而不是 console.log 将在此时提供 posts 的真实表示，这是 { value: [] } 的反应式表示。

当我在引用对象上使用 .value 时，Vuejs Composition API 值消失

Vuejs Composition API value disappear when I use .value on a Reference object

javascript

api

composition

vue.js