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

user_14331539 0
Viewed 103

my code is below

<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>

enter image description here

However, as seen in the picture. When I use the .value on my posts Reference object, my entire value disappeared (As seen in the console, where the initial console.log does indicate that there is a array in my _value. May I know what is happening? Thank you so much!

vue.js composition api javascript
1 Answers

This is specific to the nature of a ref, because it essentially contains a reference to a value that may change in time. This is exactly what happens here, ref value is being changed asynchronously on getPosts success.

The value doesn't disappear; it doesn't exist at the time when console.log is called. This is specific to how console works, it preserves a reference to output object and can update its appearance in console on change.

This console feature can be used to observe changes in object any time later. Also it can be misused; the console should be used for realtime debugging as the last resort because it doesn't reflect the actual state of things. Putting a breakpoint instead of console.log will provide a truthful representation of posts at this moment of time, which is reactive representation of { value: [] } .

user_37315010
Related