Jump Start with Vue 3/

...

/

Dealing with Data: ref() and reactive()

Dealing with Data: ref() and reactive()

Learn about the ref() and reactive() functions in the Composition API.

We'll cover the following...

Overview

What about working with the component state if there’s no access to the instance? Vue 3 provides tools for creating reactive data within the setup() method.

The ref() function

The ref() function is used to create reactive primitive values (such as strings, numbers, booleans, and so on). It creates a wrapper around the value, allowing it to be passed by reference:

Press + to interact
import { ref } from 'vue';
export default {
  setup() {
    const isLoggedIn = ref(false);
    console.log(isLoggedIn.value); // output: false
  }
}

As we can see in the example above, in order to access (or update) the value of a ref, we have to use the .value property. This is only necessary from within our JavaScript code; within the template, the value is automatically handled.

Code example

...